En este artículo, aprenderemos cómo crear una barra de progreso circular usando SVG.
Comencemos con la parte HTML. En el círculo SVG, los atributos cx y cy definen las coordenadas x e y del círculo. Si cx y cy no se llevan al centro del círculo, se establece en (0,0). El atributo r define el radio del círculo. Span es un contenedor de caracteres en línea que se utiliza para marcar una parte de un texto. Se puede diseñar fácilmente con CSS. Span es muy parecido a un elemento div de HTML , pero div es un elemento a nivel de bloque. El bloque div aísla visualmente una sección de un documento en la página y puede contener otros componentes a nivel de bloque.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css" /> <title>Circle progress bar</title> </head> <body> <div class="circle_box"> <div> <svg> <circle cx="100" cy="100" r="95" /> <circle cx="100" cy="100" r="95" /> </svg> <span>90%</span> </div> <strong>c++ developer</strong> </div> <div class="circle_box"> <div> <svg> <circle cx="100" cy="100" r="95" /> <circle cx="100" cy="100" r="95" /> </svg> <span>75%</span> </div> <strong>python developer</strong> </div> <div class="circle_box"> <div> <svg> <circle cx="100" cy="100" r="95" /> <circle cx="100" cy="100" r="95" /> </svg> <span>40%</span> </div> <strong>php developer</strong> </div> </body> </html>
El tamaño de cuadro CSS nos permite incluir relleno y borde en el ancho y alto total de un elemento . La propiedad de transformación CSS da una transformación 2D o 3D a un elemento. La propiedad permite rotar, mover, etc. La propiedad de desbordamiento ayuda a recortar el contenido. El ancho del trazo se usa para establecer el ancho del borde en las formas SVG.
N-th-child coincide con cada elemento que es el n-ésimo hijo de su padre. N puede ser un número, una palabra clave o una fórmula. El desplazamiento de trazo define la ubicación a lo largo de una ruta SVG donde comenzará el trazo de un trazo. La propiedad stroke-dash-array se usa para crear guiones en el trazo de formas SVG. La función CSS calc() realiza cálculos al especificar valores de propiedad CSS. La función calc() permite utilizar expresiones matemáticas con suma (+), resta (-), multiplicación (*) y división (/) como valores de componente.
style.css
*,*:after,*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: arial;
font-size: 16px;
margin: 0;
background: #122325;
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh;
}
svg{
width: 200px;
height: 200px;
transform: rotate(-90deg);
overflow: initial;
}
circle{
stroke-width:20px;
fill:none;
}
circle:nth-child(1){ stroke: #fff }
circle:nth-child(2){
stroke: #f00;
position: relative;
z-index: 1;
}
.circle_box:nth-child(1) circle:nth-child(2){
stroke-dashoffset:calc(100 * 6);
stroke-dasharray:calc(100 * 6);
stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 90) / 100);
stroke-position: inside;
}
.circle_box:nth-child(2) circle:nth-child(2){
stroke-dashoffset:calc(100 * 6);
stroke-dasharray:calc(100 * 6);
stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 75) / 100);
stroke: rgb(37, 224, 109);
}
.circle_box:nth-child(3) circle:nth-child(2){
stroke-dashoffset:calc(100 * 6);
stroke-dasharray:calc(100 * 6);
stroke-dashoffset:calc((100 * 6) - ((100 * 6) * 40) / 100);
stroke: rgb(227, 241, 25);
}
.circle_box{
font-size: 36px;
color: #fff;
text-align: center;
}
.circle_box div{
position: relative;
}
.circle_box span{
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 40px;
}
Salida: Ahora, como puede ver en la salida, hemos creado un hermoso gráfico de progreso, que atraerá a los lectores a leer el progreso de una persona en un lenguaje de programación.
Publicación traducida automáticamente
Artículo escrito por sabarish0088 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA