# Progress (barra de progreso)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/component-progress.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Componentes · Estado

Representa el avance cuantificable de una tarea con colores componibles desde la paleta de backgrounds y movimiento configurable.

v2.0

72
## Valor real
Expone value y max al navegador y tecnologías de asistencia.

∞
## Paleta completa
Cualquier utilidad bg-{color}-{tone} puede definir el color del avance.

→
## Avance animado
La barra crece desde cero y reutiliza duración y delay del sistema de motion.

i
## Color y movimiento componibles
Combina `.q-progress--animated` con cualquier utilidad `.bg-*`. La animación respeta `prefers-reduced-motion`; para una espera indeterminada utiliza Loading.

Código + resultado

## Ejemplos aplicados de Progress
Selecciona una variante para revisar únicamente su código y el resultado correspondiente.

HTML

```html
<div class="q-progress-group">
    <div class="q-progress__meta">
      <strong>
        Publicando proyecto
      </strong>
      <span>
        72%
      </span>
    </div>
    <progress class="q-progress rounded-p q-progress--animated bg-sky-500 anim-duration-1000" value="72" max="100">
      72%
    </progress>
  </div>
```

Resultado aplicado   Progress · tamaño estándar

Componente real
Publicando proyecto  72%
72%

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

HTML

```html
<div class="q-progress-group">
    <div class="q-progress__meta">
      <strong>
        Preparando recursos
      </strong>
      <span>
        45%
      </span>
    </div>
    <progress class="q-progress rounded-p q-progress--animated q-progress--lg bg-violet-600 anim-duration-1000 anim-delay-150" value="45" max="100">
      45%
    </progress>
  </div>
```

Resultado aplicado   Progress · tamaño grande

Componente real
Preparando recursos  45%
45%

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

HTML

```html
<div class="q-progress-group">
    <div class="q-progress__meta">
      <strong>
        Optimizando estilos
      </strong>
      <span>
        88%
      </span>
    </div>
    <progress class="q-progress rounded-p q-progress--animated q-progress--sm bg-emerald-500 anim-duration-1000 anim-delay-300" value="88" max="100">
      88%
    </progress>
  </div>
```

Resultado aplicado   Progress · tamaño pequeño

Componente real
Optimizando estilos  88%
88%

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

Referencia

## Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.

| Clase o atributo | Función | Uso recomendado |
| --- | --- | --- |
| .q-progress-group | Grupo | Agrupa texto y barra. |
| .q-progress__meta | Metadatos | Muestra etiqueta y porcentaje. |
| .q-progress | Barra | Estilo base del progress nativo. |
| .q-progress--animated | Animación | Hace crecer el avance desde cero respetando reduced motion. |
| .q-progress--success | Éxito | Progreso positivo. |
| .q-progress--warning | Advertencia | Progreso con atención. |
| .q-progress--danger | Peligro | Progreso crítico. |
| .q-progress--sm | Tamaño pequeño | Reduce la altura de la barra. |
| .q-progress--lg | Tamaño grande | Aumenta la altura de la barra. |
| .bg-sky-500 | Color de avance | Toma el color celeste desde la paleta de backgrounds. |
| .bg-violet-600 | Color de avance | Toma el color violeta desde la paleta de backgrounds. |
| .bg-emerald-500 | Color de avance | Toma el color esmeralda desde la paleta de backgrounds. |
| .anim-duration-1000 | Duración | Define un segundo para la animación de avance. |
| .anim-delay-150 | Delay | Retrasa 150ms el inicio de la variante grande. |
| .anim-delay-300 | Delay | Retrasa 300ms el inicio de la variante pequeña. |
| .bc-{token} | Color de acento | Define el color del avance cuando no se utiliza una clase bg-*. |
| .rounded-p | Forma de píldora | Redondea la barra mediante una utilidad independiente. |

Recomendaciones

## Buenas prácticas de Progress

01
### Valor honesto
Actualiza el porcentaje según progreso real.

02
### Nombre de tarea
Explica qué proceso está avanzando.

03
### Paleta coherente
Usa las mismas clases bg-* que el resto de la interfaz para mantener consistencia.

04
### Movimiento responsable
Respeta reduced motion y usa Loading si el avance real es indeterminado.