Spinners

Indique o estado de carga dun compoñente ou páxina con spinners Bootstrap, construídos integramente con HTML, CSS e sen JavaScript.

Nesta páxina

Sobre

Os "spinners" de arranque pódense usar para mostrar o estado de carga dos teus proxectos. Están construídos só con HTML e CSS, o que significa que non necesitas JavaScript para crealos. Non obstante, necesitarás JavaScript personalizado para cambiar a súa visibilidade. O seu aspecto, aliñamento e tamaño pódense personalizar facilmente coas nosas incribles clases de utilidade.

Para propósitos de accesibilidade, cada cargador inclúe aquí role="status"e un <span class="visually-hidden">Loading...</span>.

O efecto de animación deste compoñente depende da prefers-reduced-motionconsulta multimedia. Consulta a sección de movemento reducido da nosa documentación de accesibilidade .

Spinner de borde

Use os xiradores de bordo para un indicador de carga lixeiro.

html

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

Cores

O xiro de bordo usa currentColorpara o seu border-color, o que significa que pode personalizar a cor coas utilidades de cor de texto . Podes usar calquera das nosas utilidades de cor de texto no xiro 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 que non usar border-colorutilidades? Cada xirador de bordo especifica un transparentbordo para polo menos un lado, polo que as .border-{color}utilidades anularían iso.

Spinner en crecemento

Se non che apetece un spinner de borde, cambia ao grow spinner. Aínda que tecnicamente non xira, crece repetidamente!

html

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

Unha vez máis, este xiro está construído con currentColor, polo que pode cambiar facilmente o seu aspecto coas utilidades de cor de texto . Aquí está en azul, xunto coas variantes admitidas.

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>

Aliñación

Os spinners en Bootstrap están construídos con rems, currentColor, e display: inline-flex. Isto significa que poden cambiar o tamaño, cambiar a cor e aliñarse rapidamente.

Marxe

Use utilidades de marxe como .m-5para facilitar o espazo.

html

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

Colocación

Use as utilidades flexbox , as utilidades flotantes ou as utilidades de aliñamento de texto para colocar os spinners exactamente onde os precise en calquera situación.

Dobrar

html

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

Cargando...

html

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

Flotadores

html

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

Aliñación de texto

html

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

Tamaño

Engade .spinner-border-sme .spinner-grow-smpara facer un xiro máis pequeno que se pode usar rapidamente dentro doutros compoñentes.

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>

Ou, use CSS personalizados ou estilos en liña para cambiar as dimensións segundo sexa 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>

Botóns

Usa os xiradores dentro dos botóns para indicar que se está a procesar ou a realizar unha acción. Tamén pode cambiar o texto do elemento xiratorio e utilizar o texto do botón segundo sexa 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

Engadido na v5.2.0

Como parte do enfoque de variables CSS en evolución de Bootstrap, os spinners agora usan variables CSS locais .spinner-borderpara .spinner-growmellorar a personalización en tempo real. Os valores para as variables CSS establécense a través de Sass, polo que a personalización de Sass tamén se admite.

Variables do border spinner:

  --#{$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 do spinner en crecemento:

  --#{$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 os spinners, utilízanse pequenas clases de modificadores de spinners para actualizar os valores destas variables CSS segundo sexa necesario. Por exemplo, a .spinner-border-smclase fai o seguinte:

  --#{$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;

Fotogramas clave

Usado para crear animacións CSS para os nosos spinners. Incluído 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;
  }
}