Barras de progreso

Diez patrones con accesibilidad completa. El tiempo de cada demo está simulado y se puede reemplazar por tu proceso real.

1. Lineal determinada

Controlada por un valor 0 a 100. Variantes: normal, rayada animada y con brillo.

0%

2. Indeterminada y buffer

Cuando no se conoce el total, o el contenido se precarga más rápido de lo que se usa.

Reproducido 0% · precargado 0%

3. Barra superior estilo NProgress

Se engancha a la navegación entre vistas: avanza sola, se completa y se oculta.

Listo. La barra aparece arriba de la página.

4. Circular y gauge

Anillo SVG con porcentaje y semicírculo para métricas (ej. puntaje de clima).

0%
0

5. Pasos con porcentaje

Proceso en etapas: cada segmento se llena y el siguiente se activa.

Paso 1 de 4

6. Multi-segmento

Una sola barra con varias categorías, ideal para almacenamiento o distribución.

7. Subida con velocidad y tiempo restante

Tres archivos con progreso real simulado: pausar, reanudar, cancelar y reintentar si falla.

8. Contador animado

Los números suben con easing; con movimiento reducido aparecen directo.