Barra de progreso circular con HTML/CSS simple
| Autor: | jumpifzero |
|---|---|
| Views Total: | 11,134 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 14, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Un enfoque HTML y CSS puro para presentar valores porcentuales en círculos parcialmente llenos como el gráfico de anillos. Impulsado por la transformación CSS3 y las propiedades de clip.
Funcionamiento
Coloque la hoja de estilo de núcleo CSS-circular-PROG-bar. CSS en el encabezado del documento y estamos listos para ir.
<link href="css-circular-prog-bar.css" rel="stylesheet">
Crear una barra de progreso circular (10%) siguiendo la estructura de marcado como esta:
<div class="progress-circle p10"> <span>10%</span> <div class="left-half-clipper"> <div class="first50-bar"></div> <div class="value-bar"></div> </div> </div>
