Barra de progreso circular animada mediante la animación de ruta SVG

Vista prévia

Descripción

Una solución CSS pura para crear una barra de progreso circular con estilo delgado usando animaciones de ruta de acceso SVG y animación CSS3 & transforma.

Uso básico

Cree la animación de carga con fotogramas clave CSS3.

@-webkit-keyframes
 load { 0% {
stroke-dashoffset:0
}
}
@-moz-keyframes
 load { 0% {
stroke-dashoffset:0
}
}
@keyframes
 load { 0% {
stroke-dashoffset:0
}
}

Agregue los estilos CSS/CSS3 principales para sus barras de progreso.

.progress>li {

display: inline-block;

position: relative;

text-align: center;

color: #93A2AC;

font-family: Lato;

font-weight: 100;

margin: 2rem;
}

.progress>li:before {

content: attr(data-name);

position: absolute;

width: 100%;

bottom: -2rem;

font-weight: 400;
}

.progress>li:after {

content: attr(data-percent);

position: absolute;

width: 100%;

top: 3.7rem;

left: 0;

font-size: 2rem;

text-align: center;
}

.progress svg {

width: 10rem;

height: 10rem;
}

.progress svg:nth-child(2) {

position: absolute;

left: 0;

top: 0;

transform: rotate(-90deg);

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);
}

.progress svg:nth-child(2) path {

fill: none;

stroke-width: 25;

stroke-dasharray: 629;

stroke: rgba(255, 255, 255, 0.9);

-webkit-animation: load 10s;

-moz-animation: load 10s;

-o-animation: load 10s;

animation: load 10s;
}

Cree una barra de progreso circular mediante rutas de acceso SVG y use atributo de de datos por ciento para especificar el valor de porcentaje.

<ul class="progress">

<li data-name="SVG Skill" data-percent="13%"> <svg viewBox="-10 -10 220 220">


<g fill="none" stroke-width="3" transform="translate(100,100)">



<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>



<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>



<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>



<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>



<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>



<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>


</g>


</svg> <svg viewBox="-10 -10 220 220">


<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="81"></path>


</svg> </li>
</ul>