Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de progreso radial

Última actualización:

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-progressBaseIndicador de progreso circular impulsado por --radial-progress--value
radial-progress-xsTamañoextrapequeño
radial-progress-smTamañoPequeño
radial-progress-mdTamañoMedio (predeterminado)
radial-progress-lgTamañoGrande
radial-progress-xlTamañoExtra grande
radial-progress-baseColorColor de superficie base apagado
radial-progress-currentColorHereda explícitamente el color del texto actual.
radial-progress-primaryColorColor del tema principal
radial-progress-secondaryColorColor del tema secundario
radial-progress-accentColorColor del tema de acento
radial-progress-neutralColorColor de tema neutro
radial-progress-infoColorColor semántico de información
radial-progress-successColorColor semántico del éxito
radial-progress-warningColorColor semántico de advertencia
radial-progress-errorColorColor 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

html 
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

html 
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

html 
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.

Pruebe Cherry MCP