Generador de barra de progreso circular CSS
Crea un anillo de progreso SVG y copia el código
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta te permite ajustar con controles deslizantes el porcentaje, tamaño, grosor de línea, colores y velocidad de animación de un indicador de progreso circular mientras ves una vista previa SVG en tiempo real, para luego copiar el código SVG y CSS listo para usar. Es útil para desarrolladores y diseñadores que crean indicadores de carga, paneles o tarjetas de estadísticas, y todo el cálculo y la vista previa se ejecutan enteramente en tu navegador sin enviar nada a un servidor.
Cómo usar
- Ajusta con los controles deslizantes el porcentaje, el grosor de línea y el tamaño del círculo.
- Elige el color de progreso, el color de fondo (track) y el color del texto con el selector de color o el código hexadecimal.
- Activa o desactiva el texto central y la animación de transición, y ajusta la duración de la animación.
- Revisa la vista previa en vivo y copia el código SVG o CSS generado en tu proyecto.
Preguntas frecuentes
- ¿Puedo usar el SVG generado directamente en React o Vue?
- Sí, es marcado SVG puro que funciona en cualquier framework; en JSX solo necesitas convertir atributos como stroke-width a camelCase.
- ¿Se anima el anillo cuando cambia el porcentaje?
- Si activas la animación de transición, se aplica una transición CSS a stroke-dashoffset, por lo que al actualizar el porcentaje en tu aplicación el anillo se rellena suavemente.
- ¿Se envían mis datos a un servidor?
- No, todos los cálculos y la vista previa SVG se realizan enteramente en tu navegador, sin almacenamiento ni envío alguno.