Spineri

Indicați starea de încărcare a unei componente sau a unei pagini cu ajutorul filatoarelor Bootstrap, construite în întregime cu HTML, CSS și fără JavaScript.

Pe aceasta pagina

Despre

„Spinnerele” Bootstrap pot fi folosite pentru a afișa starea de încărcare în proiectele dvs. Sunt construite numai cu HTML și CSS, ceea ce înseamnă că nu aveți nevoie de JavaScript pentru a le crea. Cu toate acestea, veți avea nevoie de ceva JavaScript personalizat pentru a le comuta vizibilitatea. Aspectul, alinierea și dimensionarea lor pot fi personalizate cu ușurință cu ajutorul uimitoarelor noastre clase de utilitate.

În scopuri de accesibilitate, fiecare încărcător de aici include role="status"și un <span class="visually-hidden">Loading...</span>.

Efectul de animație al acestei componente depinde de prefers-reduced-motioninterogarea media. Consultați secțiunea cu mișcare redusă a documentației noastre de accesibilitate .

Rotor de frontieră

Folosiți chenarele pentru un indicator de încărcare ușor.

html

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

Culori

Spinnerul de chenar folosește currentColorpentru el border-color, ceea ce înseamnă că puteți personaliza culoarea cu utilitare pentru culoarea textului . Puteți folosi oricare dintre utilitarele noastre de culoare pentru text pe spinnerul standard.

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>

De ce să nu folosești border-colorutilități? Fiecare chenar specifică un transparentchenar pentru cel puțin o parte, așa că .border-{color}utilitățile ar înlocui asta.

Spiner în creștere

Dacă nu vă place un spinner de bordură, treceți la spinner de creștere. Deși nu se învârte din punct de vedere tehnic, crește în mod repetat!

html

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

Încă o dată, acest spinner este construit cu currentColor, astfel încât să-i poți schimba cu ușurință aspectul cu utilitare de culoare text . Iată-l în albastru, alături de variantele suportate.

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>

Aliniere

Spinnerele din Bootstrap sunt construite cu rems, currentColor, și display: inline-flex. Aceasta înseamnă că pot fi cu ușurință redimensionate, recolorate și aliniate rapid.

Marja

Utilizați utilități de marjă, cum ar fi .m-5pentru spațiere ușoară.

html

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

Plasarea

Folosiți utilitarele flexbox , utilitarele float sau utilitarele de aliniere a textului pentru a plasa spinnerele exact acolo unde aveți nevoie de ele în orice situație.

Contracta

html

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

Se încarcă...

html

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

Plutitoare

html

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

Aliniere text

html

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

mărimea

Adăugați .spinner-border-smși .spinner-grow-smpentru a face un spinner mai mic care poate fi utilizat rapid în alte componente.

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>

Sau, utilizați CSS personalizat sau stiluri inline pentru a modifica dimensiunile după cum este necesar.

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>

Butoane

Folosiți rotativele din butoane pentru a indica că o acțiune este în curs de procesare sau are loc. De asemenea, puteți schimba textul din elementul rotativ și puteți utiliza textul butonului după cum este necesar.

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

Variabile

Adăugat în v5.2.0

Ca parte a abordării în evoluție a variabilelor CSS a Bootstrap, spinnerii folosesc acum variabile CSS locale pe .spinner-borderși .spinner-growpentru personalizare îmbunătățită în timp real. Valorile pentru variabilele CSS sunt setate prin Sass, astfel încât personalizarea Sass este încă acceptată.

Variabilele spinner de frontieră:

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

Variabile în creștere pentru spinner:

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

Pentru ambii spinneri, sunt folosite clase mici de modificatori de spinner pentru a actualiza valorile acestor variabile CSS după cum este necesar. De exemplu, .spinner-border-smclasa face următoarele:

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

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

Cadre cheie

Folosit pentru crearea animațiilor CSS pentru spinnerii noștri. Inclus în scss/_spinners.scss.

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

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