Skip to main content Skip to docs navigation
En GitHub

Spinners

Indica el estado de carga de un componente o una página con los indicadores giratorios de Bootstrap, creados completamente con HTML, CSS y sin JavaScript.

En esta página

Acerca de spinners

Los “spinners” de Bootstrap se pueden usar para mostrar el estado de carga en tus proyectos. Están construidos solo con HTML y CSS, lo que significa que no necesitas JavaScript para crearlos. Sin embargo, necesitarás JavaScript personalizado para alternar su visibilidad. Su apariencia, alineación y tamaño se pueden personalizar fácilmente con nuestras increíbles clases de utilidad.

Para propósitos de accesibilidad, cada cargador aquí incluye role="status" y un <span class="visually-hidden">Cargando...</span> anidado.

El efecto de animación de este componente depende de la media query prefers-reduced-motion. Consulta la sección de movimiento reducido de nuestra documentación de accesibilidad.

Spinner de borde

Utiliza los spinners de borde para un indicador de carga ligero.

<div class="spinner-border" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>

Colores

El spinner de borde usa currentColor para su border-color, lo que significa que puedes personalizar el color con utilidades de color de texto. Puedes usar cualquiera de nuestras utilidades de color de texto en el spinner estándar.

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>
¿Por qué no usar las utilidades border-color? Cada marcador giratorio de borde especifica un borde transparent para al menos un lado, por lo que las utilidades .border-{color} sobrescribirían eso.

Spinner creciente

Si no te apetece un spinner de borde, cambia al spinner de crecimiento. Si bien técnicamente no gira, ¡crece repetidamente!

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>

Una vez más, este spinner está construido con currentColor, por lo que puedes cambiar fácilmente su apariencia con utilidades de color de texto. Aquí está en azul, junto con las variantes admitidas.

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

Alineación

Los spinners en Bootstrap están construidos con rems, currentColor y display: inline-flex. Esto significa que se pueden cambiar de tamaño, cambiar de color y alinear rápidamente.

Margen

Usa [utilidades de margen][margen] como .m-5 para facilitar el espaciado.

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>

Colocación

Utiliza las utilidades flexbox, utilidades float o alineación de texto para colocar los spinners exactamente donde los necesitas en cualquier situación.

Flex

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
</div>
Cargando... 
<div class="d-flex align-items-center">
  <strong>Cargando...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Floats

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
</div>

Alineación de texto

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
</div>

Tamaño

Agrega .spinner-border-sm y .spinner-grow-sm para hacer un spinner más pequeño que se pueda usar rápidamente dentro de otros componentes.

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Cargando...</span>
</div>

O bien, usa CSS personalizado o estilos en línea para cambiar las dimensiones según sea necesario.

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

Botones

Usa los spinners dentro de botones para indicar que una acción se está procesando o está teniendo lugar actualmente. También puedes cambiar el texto fuera del elemento spinner y utilizar el texto del botón según sea necesario.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Cargando...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Cargando...
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Cargando...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Cargando...
</button>

Sass

Variables

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

Keyframes

Usado para crear las animaciones CSS para nuestros spinners. Incluido en scss/_spinners.scss. 

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}