Spinners

<< Placeholder Toast >>

Los spinners los utilizamos para decir que se está cargando un componente. Están creados con HTML y CSS, sin necesidad de utilizar JS. Sin embargo, si queremos customizarlo ahí sí debemos utilizar JS.

Los efectos de la animación de carga van a depender de las preferencias del usuario (prefers-reduced-motion) si decide "suavizar" la animación o no.

Para crear un spinner usaremos la clase .spinner-border si queremos que ese spinner tenga un color de los predefinidos por bootstrap, deberemos usar la clase .text-X

Si nos fijamos, cada uno de los spinners tiene el atributo role="status" acompañado de un span con un Loading... y la clase .visually-hidden, esto está pensado para propósitos de accesibilidad.

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Podemos usar los spinners que "aparecen" y "desaparecen" usando la clase .spinner-grow en lugar de .spinner-border.

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Estos spinners podemos personalizarlos en una determinada posición, o ponerlos en botones por ejemplo.

<< Placeholder Toast >>