Tipo 01
Sin contenedor
La forma sola sobre el fondo.
Componentes Indicador de carga
Indicador de carga
El indicador de carga de Material 3 es una forma que cambia y gira mientras algo carga. Se usa para esperas cortas cuando el progreso no se puede medir.
Uso
Úsalo para esperas de menos de 5 segundos sin progreso medible: refrescar una lista, cargar una tarjeta.
- Refrescar contenido
- Cargas cortas de una sección
- Procesos largos o medibles: usa un indicador de progreso lineal
- Toda la página en blanco: muestra esqueletos de contenido
Principios
1
Expresivo
La forma cambia para que la espera se sienta más corta.
2
Breve
Solo para esperas cortas.
3
En su lugar
Aparece donde va a llegar el contenido.
Tipos
Tipo 02
Con contenedor
Dentro de un círculo, para ponerlo sobre contenido (por ejemplo, al jalar para refrescar).
Anatomía
12
- Forma activa (cambia y gira)
- Contenedor (opcional)
Comportamiento
- La forma alterna entre figuras (círculo, flor, estrella) mientras gira.
- Al terminar, se encoge y desaparece.
- Si la carga se alarga, conviene pasar a un indicador de progreso.
Medidas
| Medida | Valor de referencia |
|---|---|
| Tamaño | 48 dp (forma activa de unos 38 dp) |
| Con contenedor | 48 dp de diámetro |
| Duración recomendada | menos de 5 s |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Rol
role="progressbar" con aria-label="Cargando".
Zona ocupada
aria-busy="true" en el contenido que carga.
Movimiento reducido
Con prefers-reduced-motion, gira sin cambiar de forma.