Generador de barra de progreso circular en CSS
Diseña un progreso circular en SVG ajustando color y tamaño, y exporta el código
Herramienta para crear barras de progreso circulares ajustando con deslizadores el porcentaje, el tamaño, el grosor del trazo, los colores y la velocidad de la animación, con vista previa en tiempo real y copia directa del código SVG y CSS. Es ideal para desarrolladores y diseñadores que necesitan un medidor circular para paneles de control, indicadores de carga o tarjetas de estadísticas. Todos los cálculos y la vista previa se ejecutan dentro de tu navegador: no se envía absolutamente nada a ningún servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Ajusta con los deslizadores el progreso (%), el grosor del trazo y el tamaño del círculo.
- Define el color de progreso, el del fondo (pista) y el del texto con el selector de color o escribiendo el código.
- Decide si quieres mostrar el texto central, si activas la animación de transición y cuánto dura.
- Comprueba el resultado en la vista previa y copia el código SVG o CSS para pegarlo en tu proyecto.
Preguntas frecuentes
- ¿Puedo usar el código generado tal cual en un proyecto React o Vue?
- Sí. Es marcado SVG puro, así que se pega en cualquier framework; en JSX basta con pasar atributos como stroke-width a camelCase si hiciera falta.
- ¿La animación se reproduce sola cuando cambia el progreso?
- Si activas la animación de transición, la propiedad CSS transition se aplica a stroke-dashoffset, de modo que al cambiar el valor de progreso en pantalla el círculo se rellena de forma suave.
- ¿Se guardan en un servidor los valores que introduzco?
- No. Todos los cálculos y el renderizado del SVG ocurren solo en tu navegador; nada se almacena ni se transmite.