Componentes de Bootstrap

Indicadores de carga

Un indicador de que algo se está cargando cuando la espera no se puede medir.

Un indicador de carga dice al usuario que el sistema está trabajando. Úsalo para esperas de duración desconocida: cargar una lista, guardar, enviar. Para una cantidad conocida, usa una barra de progreso.

Cuándo usarlo

Úsalo

Decir qué se carga con un texto, visible u oculto.
Usar el tamaño pequeño dentro de un botón y desactivar el botón.
Mostrarlo solo pasado un momento (unos 300 ms), para que las cargas rápidas no parpadeen.

No

Cubrir toda la página cuando solo carga una parte.
Dejarlo girando tras un error: muestra el error.
Usar dos a la vez para la misma espera.

Anatomía

Un círculo que gira (spinner-border) o late (spinner-grow) con una etiqueta oculta para tecnologías de apoyo.

Variantes y estados

Indicadores de carga

Combinaciones

Combinación	Para qué usarla
Indicador × botón	Pequeño, dentro de un botón desactivado cuyo texto dice qué ocurre («Guardando…»).
Indicador × región	Centrado en la región que carga, con una etiqueta oculta; no sobre toda la página.
Borde × latido	Borde para una espera corta, latido cuando cargan varias cosas a la vez.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
Una línea más fina, del color del texto	Es una señal discreta que no llama más la atención que el contenido que viene.
Siempre con un texto para tecnologías de apoyo	Un indicador mudo no dice nada a quien no ve; un mensaje de estado sí.

Clases

Clase	Qué hace
`spinner-border`, `spinner-grow`	Los dos tipos
`spinner-border-sm`, `spinner-grow-sm`	Pequeño, para botones y líneas de texto
`text-primary`…	Color (toma el color del texto)

En esta versión

Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable.

Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos.

Accesibilidad

role="status" y una etiqueta oculta («Cargando…»).
Dentro de un botón, el indicador es aria-hidden y el texto del botón dice qué ocurre.
Con movimiento reducido gira más despacio, nunca se detiene.