Componentes · Estado
Progress (barra de progreso)
Representa el avance cuantificable de una tarea con colores componibles desde la paleta de backgrounds y movimiento configurable.
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.
Código + resultado
Ejemplos aplicados de Progress
Selecciona una variante para revisar únicamente su código y el resultado correspondiente.
<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>Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
<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>Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.
<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>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
Valor honesto
Actualiza el porcentaje según progreso real.
Nombre de tarea
Explica qué proceso está avanzando.
Paleta coherente
Usa las mismas clases bg-* que el resto de la interfaz para mantener consistencia.
Movimiento responsable
Respeta reduced motion y usa Loading si el avance real es indeterminado.