Progreso radial CSS de Tailwind solo para CSS: anillo de progreso circular con visualización de porcentaje. Variantes de color y tamaño, sin JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Los componentes de progreso radial muestran el porcentaje de finalización en un formato circular, lo que ofrece una alternativa elegante a las barras de progreso lineales. Construido con visualización basada en SVG y animaciones CSS, el progreso radial agrega interés visual a los paneles e indicadores de estado. El sistema de progreso radial de Frutjam admite múltiples tamaños y colores, ideal para métricas, seguimiento de finalización y visualización de datos.
Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.
| Clase | Tipo | Descripción |
|---|---|---|
| radial-progress | Base | Indicador de progreso circular impulsado por --radial-progress--value |
| radial-progress-xs | Tamaño | extrapequeño |
| radial-progress-sm | Tamaño | Pequeño |
| radial-progress-md | Tamaño | Medio (predeterminado) |
| radial-progress-lg | Tamaño | Grande |
| radial-progress-xl | Tamaño | Extra grande |
| radial-progress-base | Color | Color de superficie base apagado |
| radial-progress-current | Color | Hereda explícitamente el color del texto actual. |
| radial-progress-primary | Color | Color del tema principal |
| radial-progress-secondary | Color | Color del tema secundario |
| radial-progress-accent | Color | Color del tema de acento |
| radial-progress-neutral | Color | Color de tema neutro |
| radial-progress-info | Color | Color semántico de información |
| radial-progress-success | Color | Color semántico del éxito |
| radial-progress-warning | Color | Color semántico de advertencia |
| radial-progress-error | Color | Color semántico del error |
Uso básico
<div class="radial-progress" style="--radial-progress--value:70">70%</div> |
1 2 3 4 | function RadialProgress() { const progress = {"--radial-progress--value": 70} return <div className="radial-progress" style={progress}>70%</div> } |
Tamaños de progreso radial
1 2 3 4 5 | <div class="radial-progress radial-progress-xs" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-sm" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-md" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-lg" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-xl" style="--radial-progress--value:70">70%</div> |
Colores de progreso radial
1 2 3 4 5 6 7 8 9 | <div class="radial-progress radial-progress-base" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-primary" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-secondary" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-accent" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-neutral" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-info" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-success" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-warning" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-error" style="--radial-progress--value:70">70%</div> |
Progreso radial con etiqueta
Tasks Completed
1 2 3 4 5 6 | <div class="flex flex-col items-center gap-4"> <div class="text-center"> <div class="radial-progress radial-progress-xl radial-progress-primary" style="--radial-progress--value:85">85%</div> <p class="text-sm mt-2">Tasks Completed</p> </div> </div> |
¿Usando Claude Code, Cursor u otro editor de IA?
Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Progreso radial según sea necesario. No más clases alucinadas.