Source

Hilanderos

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

Sobre

Los "spinners" de Bootstrap se pueden usar para mostrar el estado de carga en sus proyectos. Están construidos solo con HTML y CSS, lo que significa que no necesita JavaScript para crearlos. Sin embargo, necesitará 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.

Por motivos de accesibilidad, cada cargador aquí incluye role="status"un archivo <span class="sr-only">Loading...</span>.

Hilandero de borde

Utilice los giradores de borde para un indicador de carga ligero.

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

Colores

El control giratorio de borde se utiliza currentColorpara su border-color, lo que significa que puede personalizar el color con utilidades de color de texto . Puede usar cualquiera de nuestras utilidades de color de texto en la rueda giratoria estándar.

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

¿Por qué no usar border-colorutilidades? Cada control giratorio de borde especifica un transparentborde para al menos un lado, por lo .border-{color}que las utilidades anularían eso.

hilandero creciente

Si no te apetece una ruleta de borde, cambia a la ruleta de crecimiento. Si bien técnicamente no gira, ¡crece repetidamente!

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

Una vez más, esta ruleta está construida con currentColor, por lo que puede cambiar fácilmente su apariencia con las utilidades de color de texto . Aquí está en azul, junto con las variantes admitidas.

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">Loading...</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

Use utilidades de margen como .m-5para facilitar el espaciado.

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

Colocación

Use las utilidades de flexbox, las utilidades de flotación o las utilidades de alineación de texto para colocar los giradores exactamente donde los necesita en cualquier situación.

Flexionar

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

Cargando...

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

flotadores

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Texto alineado

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

Tamaño

Agregue .spinner-border-smy .spinner-grow-smpara hacer una ruleta más pequeña que se pueda usar rápidamente dentro de otros componentes.

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

O bien, use 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="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>

Botones

Use los controles giratorios dentro de los botones para indicar que una acción se está procesando o teniendo lugar actualmente. También puede cambiar el texto del elemento giratorio 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="sr-only">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>

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