76 - Componente : Spinner

La componente Spinner nos permite mostrar el estado de carga de una página o sección de una página mediante un gráfico animado.

No requiere Javascript para su funcionamiento.

Las clases que intervienen para mostrar un Spinner y su sintaxis es:

<div class="spinner-border text-primary">
  <span class="visually-hidden">Loading...</span>
</div>

Luego tenemos la siguiente animación en la página:


Podemos utilizar cualquiera de los colores contextuales:


Podemos cambiar el tipo de animación empleando la clase 'spinner-grow' en lugar de 'spinner-border':

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

Teniendo como resultado visual:


Tamaño del spinner

Podemos mediante CSS cambiar el tamaño del spinner:

  <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;">
    <span class="visually-hidden">Cargando...</span>
  </div>

Teniendo como resultado:


Alineado

Mediante las las clases justify-content-start, justify-content-center y justify-content-end podemos alinear los controles:

  <div class="d-flex justify-content-start m-4 text-primary">
    <div class="spinner-border">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
  <div class="d-flex justify-content-center m-4 text-danger">
    <div class="spinner-border">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
  <div class="d-flex justify-content-end m-4 text-warning">
    <div class="spinner-border">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>

Teniendo como resultado:


Mostrar un botón con un spinner

Podemos utilizar esta funcionalidad para indicar una acción que aun no ha terminado. El código es el siguiente:

  <button class="btn btn-primary" type="button">
    <span class="spinner-border spinner-border-sm"></span>
    <span class="visually-hidden">Cargando...</span>Ingresar
  </button>

Obteniendo como resultado:


Ejecutar Ejemplo

Retornar