Ver en GitHub

Spinners

Indica el estado de carga de un componente o página con los spinners de Bootstrap, construidos completamente con HTML, CSS y sin JavaScript.

On this page

Acerca de

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 ningún JavaScript para crearlos. Sin embargo, necesitarás algo de JavaScript personalizado para alternar su visibilidad. Su apariencia, alineación y tamaño se pueden personalizar fácilmente con nuestras increíbles clases utilitarias.

Por motivos 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

Usa los spinners de borde como un indicador de carga ligero.

html

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

Colores

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

html

<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>

¿Por qué no usar utilidades de border-color? Cada spinner de borde especifica un borde transparent para al menos un lado, por lo que las utilidades .border-{color} lo sobrescribirían.

Spinner creciente

Si no te gusta el spinner de borde, cambia al spinner creciente. Aunque técnicamente no gira, ¡crece repetidamente!

html

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

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

html

<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>

Alineación

Los spinners de Bootstrap están construidos con rems, currentColor, y display: inline-flex. Esto significa que se pueden redimensionar, recolorear y alinear fácilmente.

Margen

Usa utilidades de margen como .m-5 para un espaciado fácil.

html

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

Ubicación

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

Flex

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Loading...

html

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

Floats

html

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

Alineación de texto

html

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

Tamaño

Agrega .spinner-border-sm y .spinner-grow-sm para crear un spinner más pequeño que puede usarse rápidamente dentro de otros componentes.

html

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

O bien, usa CSS personalizado o estilos inline para cambiar las dimensiones según sea necesario.

html

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

Botones

Usa spinners dentro de los botones para indicar que una acción se está procesando o llevando a cabo. También puedes intercambiar el texto del elemento spinner y utilizar el texto del botón según sea necesario.

html

<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">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

html

<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">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

CSS

Variables

Añadido en v5.2.0

Como parte del enfoque evolutivo de variables CSS de Bootstrap, los spinners ahora usan variables CSS locales en .spinner-border y .spinner-grow para una personalización en tiempo real mejorada. Los valores de las variables CSS se establecen vía Sass, por lo que la personalización con Sass también sigue siendo compatible.

Variables del spinner de borde:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

Variables del spinner creciente:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

Para ambos spinners, se usan clases modificadoras de spinner pequeño para actualizar los valores de estas variables CSS según sea necesario. Por ejemplo, la clase .spinner-border-sm hace lo siguiente:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Variables Sass

$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 de 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;
  }
}