Spinner
Comunica que un proceso está en curso cuando no es posible mostrar progreso determinado. Úsalo para esperas cortas y acompáñalo de una etiqueta si la espera puede superar dos segundos.
Default
Cuándo usar
- Operaciones cortas donde no puedes estimar progreso real.
- Cargas dentro de un panel o sección, no para reemplazar toda la pantalla.
- Confirmar al usuario que su acción se está procesando tras un clic.
Cuándo no usarlo
- Si conoces el porcentaje de avance: usa una progress bar.
- Si la espera supera diez segundos: usa Skeleton o un estado vacío con mensaje.
Tamaños
Cuatro tamaños
Elige el tamaño según el contenedor. Los más pequeños sirven dentro de botones o inputs; los más grandes para paneles vacíos o pantallas de carga.
Con etiqueta
Texto descriptivo
Si la espera puede tardar, indica qué está pasando con una etiqueta debajo o al costado del spinner.
Accesibilidad
Texto para lectores
- El Spinner expone role="progressbar"; si no muestras label visible, pasa aria-label o aria-labelledby.
- Anuncia cambios de estado en una región aria-live polite cuando la carga termina.
- No bloquees la interfaz completa con un spinner sin permitir cancelar.