Ficha
- Categoría
- Data display
- Nivel
- átomo
- Estado
- en revisión
- Radix
- no
- Actualizado
- 2026-10-26
- Figma
- 394:12614
- Fuente
design-system/componentes/ProgressRing.md
Cuándo usarlo
- Avance de la ruta y de las prácticas en Inicio y Mi avance (dentro de una SuggestionCard o suelto).
Cuándo NO usarlo
- Pasos o porcentajes en línea (ProgressBar); calificaciones (Badge).
Anatomía
SVG 96×96: círculo de pista y arco de avance (stroke-dasharray = fracción de la circunferencia, empieza arriba) + texto centrado.
Props
| Prop | Figma | Valores | Por defecto |
|---|---|---|---|
value | Value | texto | 10 |
total | Total | texto | /19 |
showTotal | Show total | boolean | true |
label | — | aria-label («Avance de la ruta») | Avance |
Estados
Sin estados.
Accesibilidad
- role=progressbar con aria-valuenow / aria-valuemax y nombre («Avance de la ruta»); el anillo es decorativo, los números son el contenido.
Contenido
Value = hecho; Total con su barra («/19»). Ocultar Total solo cuando el número solo es el mensaje.
Errores conocidos
- Ninguno medido.
Changelog
- 2026-10-26 · nace (T-02).
totales un número (Figma lo escribe como «/19»).