<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Email Report Producción Diario</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div class= "container">
<!--MUESTRA DISPONIBILIDAD-->
<div class="card">
<div class="box">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
<div class="number">
<h2>90<span>%</span></h2>
</div>
</div>
<h2 class="text">DISPONIBILIDAD</h2>
</div>
</div>
</div>
</body>
<style type="text/css">
{
margin:0;
padding:0;
font-family:'robot', sans-serif;
}
body
{
display:flex;
justify-content: left;
align-items:left;
min-height:100vh;
}
.container
{
position:relative;
width: 700px;
display: flex;
justify-content:space-around;
}
.container .card
svg
{
position: relative;
width: 150px;
height: 150px;
z-index:1000;
}
svg circle
{
width: 100px;
height: 100px;
fill: none;
stroke:#191919;
stroke-width: 10;
stroke-linecap: round;
transform: translate(5px,5px);
}
svg circle:nth-child(2)
{
stroke-dasharray:440;
stroke-dashoffset: 440;
}
.card:nth-child(1) svg circle:nth-child(2)
{
stroke-dashoffset: 90;
stroke: #00ff40;
}
</style>
**<script type="text/javascript">//javascript
var INdata=60;
var ct = SVGDocument.getElementsByClassName("percent");
if (INdata == 60)
{
ct.setAttribute("stroke","red");
}
</script>**
var INdata = 60;
var ct = SVGDocument.getElementsByClassName("percent");
if (INdata == 60) {
ct.setAttribute("stroke", "red");
}
{
margin: 0;
padding: 0;
font-family: 'robot', sans-serif;
}
body {
display: flex;
justify-content: left;
align-items: left;
min-height: 100vh;
}
.container {
position: relative;
width: 700px;
display: flex;
justify-content: space-around;
}
.container .card svg {
position: relative;
width: 150px;
height: 150px;
z-index: 1000;
}
svg circle {
width: 100px;
height: 100px;
fill: none;
stroke: #191919;
stroke-width: 10;
stroke-linecap: round;
transform: translate(5px, 5px);
}
svg circle:nth-child(2) {
stroke-dasharray: 440;
stroke-dashoffset: 440;
}
.card:nth-child(1) svg circle:nth-child(2) {
stroke-dashoffset: 90;
stroke: #00ff40;
}
<head>
<meta charset="utf-8">
<title>Email Report Producción Diario</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<div class="container">
<!--MUESTRA DISPONIBILIDAD-->
<div class="card">
<div class="box">
<div class="percent">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
<div class="number">
<h2>90<span>%</span></h2>
</div>
</div>
<h2 class="text">DISPONIBILIDAD</h2>
</div>
</div>
</div>
</body>
[![Trazo de un círculo][1]][1] [1]: https://i.sstatic.net/voq5T.png