Estilos

Componentes

Formularios

Organismos

Spinner

Un spinner es un indicador visual que ayuda a notificar a las personas usuarias que la carga de contenido o la recuperación de datos está en curso.

Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.

Tipos


<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Cargando...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Cargando...</span>
</div>
<div class="spinner-border text-tertiary" role="status">
  <span class="sr-only">Cargando...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Cargando...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Cargando...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Cargando...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">Cargando...</span>
</div>

Tamaños


<div class="spinner-border text-primary spinner-border-sm" role="status">
  <span class="sr-only">Cargando...</span>
</div>
<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Cargando...</span>
</div>
<div class="spinner-border text-primary spinner-border-lg" role="status">
  <span class="sr-only">Cargando...</span>
</div>

Expandible


<div class="col-4 col-md-2 mx-auto">
  <div class="spinner-block text-primary" role="status">
    <span class="sr-only">Cargando...</span>
  </div>
</div>

Con descripción


<div class="text-center">
  <div class="spinner-border text-primary spinner-border-lg" role="status">
    <span class="sr-only">Cargando...</span>
  </div>
  <p class="spinner-description">Cargando...</p>
</div>

Navegación de pie de página