in English

Spiners

Indiqueu l'estat de càrrega d'un component o pàgina amb els spinners Bootstrap, construïts completament amb HTML, CSS i sense JavaScript.

En aquesta pàgina

Sobre

Els "spinners" d'arrencada es poden utilitzar per mostrar l'estat de càrrega dels vostres projectes. Només es construeixen amb HTML i CSS, és a dir, no necessiteu cap JavaScript per crear-los. Tanmateix, necessitareu JavaScript personalitzat per canviar-ne la visibilitat. El seu aspecte, alineació i mida es poden personalitzar fàcilment amb les nostres sorprenents classes d'utilitat.

Amb finalitats d'accessibilitat, cada carregador inclou aquí role="status"un fitxer <span class="visually-hidden">Loading...</span>.

L'efecte d'animació d'aquest component depèn de la prefers-reduced-motionconsulta de mitjans. Consulteu la secció de moviment reduït de la nostra documentació d'accessibilitat .

Spinner de vora

Utilitzeu els filets de vora per obtenir un indicador de càrrega lleuger.

html

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

Colors

El filador de vores utilitza currentColorper al seu border-color, el que significa que podeu personalitzar el color amb les utilitats de color del text . Podeu utilitzar qualsevol de les nostres utilitats de color de text al girador estàndard.

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>

Per què no utilitzar border-colorutilitats? Cada filador de vores especifica una transparentvora per almenys un costat, de manera .border-{color}que els serveis públics ho anul·larien.

Spiner en creixement

Si no us agrada un filador de vora, canvieu al spinner de creixement. Tot i que tècnicament no gira, creix repetidament!

html

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

Una vegada més, aquest filador està construït amb currentColor, de manera que podeu canviar fàcilment la seva aparença amb les utilitats de color de text . Aquí està en blau, juntament amb les variants admeses.

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ó

Els spinners a Bootstrap es creen amb rems, currentColor, i display: inline-flex. Això vol dir que es poden canviar la mida, recolorir i alinear ràpidament.

Marge

Utilitzeu utilitats de marge com .m-5per facilitar l'espaiat.

html

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

Col·locació

Utilitzeu les utilitats flexbox , les utilitats flotants o les utilitats d' alineació de text per col·locar els spinners exactament on els necessiteu en qualsevol situació.

Flex

html

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

Carregant...

html

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

Flotadors

html

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

Alineació de text

html

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

Mida

Afegiu .spinner-border-smi .spinner-grow-smper fer un spinner més petit que es pugui utilitzar ràpidament amb altres components.

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 bé, utilitzeu CSS personalitzat o estils en línia per canviar les dimensions segons sigui necessari.

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>

Botons

Utilitzeu els girs dins dels botons per indicar que una acció s'està processant o tenint lloc. També podeu canviar el text de l'element giratori i utilitzar el text del botó segons sigui necessari.

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

Les variables

Afegit a la v5.2.0

Com a part de l'enfocament de les variables CSS en evolució de Bootstrap, els spinners ara utilitzen variables CSS locals .spinner-borderper .spinner-growa una personalització millorada en temps real. Els valors de les variables CSS s'estableixen mitjançant Sass, de manera que la personalització de Sass encara és compatible.

Variables del filador de vora:

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

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

Per als dos spinners, s'utilitzen petites classes de modificadors de spinner per actualitzar els valors d'aquestes variables CSS segons sigui necessari. Per exemple, la .spinner-border-smclasse fa el següent:

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

Fotogrames clau

S'utilitza per crear les animacions CSS per als nostres spinners. Inclòs a scss/_spinners.scss.

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

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