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.

En esta página

Acerca de

Los "spinners" de Bootstrap se pueden utilizar para mostrar el estado de carga en tus proyectos. Están construidos únicamente 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 de utilidad.

Para fines 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 consulta de medios prefers-reduced-motion. Consulta la sección de movimiento reducido en nuestra documentación de accesibilidad.

Spinner de borde

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

html

<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 las utilidades de color de texto. Puedes utilizar 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">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 utilidades border-color? Cada spinner de borde especifica un borde transparent para al menos un lado, por lo que las utilidades .border-{color} anularían eso.

Spinner de crecimiento

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

html

<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 las utilidades de color de texto. Aquí está en azul, junto con las variantes admitidas.

html

<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 se construyen con rem, currentColor y display: inline-flex. Esto significa que se pueden redimensionar, recolorear y alinear rápidamente de forma sencilla.

Margen

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

html

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

Colocación

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

Flex

html

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

Cargando...

html

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

Floats

html

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

Alineación de texto

html

<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 crear un spinner más pequeño que se pueda usar rápidamente dentro de otros componentes.

html

<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, utiliza CSS personalizado o estilos en línea para cambiar las dimensiones según sea necesario.

html

<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

Utiliza spinners dentro de los botones para indicar que una acción se está procesando o se está llevando a cabo. También puedes intercambiar el texto fuera 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" aria-hidden="true"></span>
  <span class="visually-hidden" role="status">Cargando...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span role="status">Cargando...</span>
</button>

html

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

CSS

Variables

Agregado en v5.2.0

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

Variables del spinner de borde:

scss/_spinners.scss

--#{$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 de crecimiento:

scss/_spinners.scss

--#{$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 utilizan 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:

scss/_spinners.scss

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

Variables de Sass

scss/_variables.scss

$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

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

scss/_spinners.scss

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

scss/_spinners.scss

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