# Gráfico de Anillo de Progreso Crear indicadores de progreso circulares hermosos con animaciones, perfectos para mostrar porcentajes, tasas de finalización y métricas de progreso > Página canónica: https://elysiatools.com/es/tools/progress-ring-chart - **Categoría:** Data Visualization - **Palabras clave:** anillo de progreso, progreso circular, porcentaje, gráfico de dona, indicador de progreso, tasa de finalización, indicador circular ## Descripción general El Gráfico de Anillo de Progreso es una herramienta visual intuitiva diseñada para generar indicadores circulares dinámicos, ideales para representar porcentajes, tasas de finalización y métricas de rendimiento con un diseño limpio y profesional. ## Entradas - **Datos de Progreso** (textarea): Valores de progreso (0-100). Soporta array JSON con etiquetas, pares simples etiqueta:valor o solo valores - **Título del Gráfico** (text): Título que se mostrará encima del gráfico - **Tamaño del Anillo** (number): Tamaño de cada anillo de progreso en píxeles - **Grosor del Anillo** (number): Grosor del trazo del anillo de progreso - **Ángulo de Inicio** (number): Ángulo de inicio en grados (-90 = arriba, 0 = derecha, 90 = abajo, 180 = izquierda) - **Esquema de Color** (select): Seleccionar esquema de color - **Colores Personalizados** (text): Colores personalizados para anillos de progreso (colores hex separados por comas) - **Duración de Animación** (number): Duración de la animación de progreso en milisegundos - **Color de Fondo** (color): Color de fondo para el contenedor del gráfico - **Mostrar Porcentaje** (checkbox): Mostrar valor de porcentaje en el centro de cada anillo - **Mostrar Etiqueta** (checkbox): Mostrar etiqueta debajo de cada anillo de progreso - **Animado** (checkbox): Animar los anillos de progreso cuando se cargan ## Cuándo usarlo - Para visualizar el avance de proyectos o tareas en presentaciones y reportes. - Para mostrar métricas de cumplimiento de objetivos de forma clara y atractiva. - Para integrar indicadores de estado en paneles de control o interfaces de usuario. ## Cómo funciona - Ingresa tus valores de progreso (0-100) en formato JSON, lista simple o texto. - Personaliza el estilo ajustando el grosor del anillo, el tamaño y el esquema de colores. - Configura las opciones de visualización, como mostrar el porcentaje central o etiquetas descriptivas. - Genera el gráfico con animaciones fluidas para una presentación impactante. ## Casos de uso - Monitoreo de KPIs de ventas en tiempo real para equipos comerciales. - Visualización del progreso de hitos en la gestión de proyectos. - Indicadores de salud o estado de sistemas en dashboards técnicos. ## Preguntas frecuentes ### ¿Qué formatos de datos acepta la herramienta? Puedes ingresar los datos como un array JSON con etiquetas y valores, una lista simple de texto (etiqueta:valor) o simplemente una serie de números. ### ¿Puedo personalizar los colores de los anillos? Sí, puedes elegir entre esquemas predefinidos (como éxito, advertencia o degradado) o ingresar tus propios códigos de color hexadecimales. ### ¿Es posible desactivar la animación? Sí, puedes desmarcar la opción 'Animado' en la configuración si prefieres que el gráfico se muestre de forma estática. ### ¿Cuál es el rango de valores permitido? La herramienta está diseñada para valores de progreso entre 0 y 100, representando porcentajes de completitud. ### ¿Puedo mostrar el porcentaje dentro del anillo? Sí, la opción 'Mostrar Porcentaje' permite visualizar el valor numérico exacto en el centro del gráfico. ## Herramientas relacionadas - [Gráfico de Estrellas de Calificación](https://elysiatools.com/es/tools/rating-star-chart): Crear visualizaciones de calificación por estrellas hermosas para productos, servicios y análisis de retroalimentación de usuarios - [Generador de Gráfico Rosa](https://elysiatools.com/es/tools/rose-chart): Generar hermosos gráficos rosa de Nightingale (gráficos de penacho) para visualizar datos a través de ángulo y área, perfecto para análisis comparativo y presentación de datos históricos - [Stream Graph Generator](https://elysiatools.com/es/tools/stream-graph-generator): Generate beautiful stream graphs for time series data with smooth flowing animations and baseline variations - [Generador de Línea de Tiempo](https://elysiatools.com/es/tools/timeline-generator): Generar líneas de tiempo hermosas e interactivas desde datos de eventos con varios diseños y estilos - [Generador de Gráfico de Barras de Comparación](https://elysiatools.com/es/tools/comparison-bar-chart): Generar gráficos de barras espalda con espalda para comparación de valores positivos y negativos, perfecto para contrastar conjuntos de datos - [Generador de Data URI](https://elysiatools.com/es/tools/data-uri-generator): Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown - [Generador de Gráfico de Dona](https://elysiatools.com/es/tools/donut-chart-generator): Generar gráficos de dona personalizables desde datos con varias opciones de estilo, perfecto para mostrar proporciones con espacio central - [Generador de Gráfico de Embudo](https://elysiatools.com/es/tools/funnel-chart-generator): Generar gráficos de embudo personalizables desde datos, perfecto para mostrar tasas de conversión, tuberías de ventas y flujos de procesos ## Ejemplos - [Muestras Avanzadas de Grafana](https://elysiatools.com/es/samples/grafana-samples): Muestras comprensivas de Grafana cubriendo diseño avanzado de dashboards, configuración de alertas, integración de fuentes de datos y desarrollo de plugins - [Ejemplos de Códigos QR](https://elysiatools.com/es/samples/qrcode-samples): Imágenes de códigos QR de muestra para probar herramientas de lectura y generación de códigos QR - [Ejemplos D3.js Data Visualization](https://elysiatools.com/es/samples/d3js-data-visualization): Ejemplos completos de visualización de datos D3.js incluyendo gráficos, mapas, animaciones y visualizaciones interactivas - [Ejemplos de Rome Toolchain JavaScript](https://elysiatools.com/es/samples/rome): Ejemplos de toolchain JavaScript de Rome incluyendo configuración, linting, formatting, bundling y gestión de proyectos ## Contenido relacionado - [Generadores de gráficos y diagramas](https://elysiatools.com/es/hubs/chart-diagram-generators): Elige una visualización para comparar, distribuir, ordenar, relacionar y planificar datos.