Spinner

Gitt de Luedezoustand vun enger Komponent oder Säit mat Bootstrap Spinner un, ganz gebaut mat HTML, CSS a kee JavaScript.

Op dëser Säit

Iwwer

Bootstrap "Spinner" kënne benotzt ginn fir de Luedezoustand an Äre Projeten ze weisen. Si sinn nëmme mat HTML an CSS gebaut, dat heescht datt Dir kee JavaScript braucht fir se ze kreéieren. Dir braucht awer e puer personaliséiert JavaScript fir hir Visibilitéit ze wiesselen. Hir Erscheinung, Ausrichtung an Gréisst kënne ganz einfach mat eisen erstaunlechen Utilityklassen personaliséiert ginn.

Fir Accessibilitéitszwecker enthält all Loader hei role="status"an eng nestéiert <span class="visually-hidden">Loading...</span>.

Den Animatiounseffekt vun dëser Komponent hänkt vun der prefers-reduced-motionMedienufro of. Kuckt d' Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .

Grenz Spinner

Benotzt d'Grenzspinner fir e liichte Luedeindikator.

html

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

Faarwen

De Grenzspinner benotzt currentColorfir seng border-color, dat heescht datt Dir d'Faarf mat Textfaarf Utilities personaliséiere kënnt . Dir kënnt all vun eisen Textfaarf Utilities op der Standard Spinner benotzen.

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>

Firwat net border-colorUtilities benotzen? All Grenzspinner spezifizéiert eng transparentGrenz fir op d'mannst eng Säit, sou datt .border-{color}Utilities dat iwwerschreiden.

Spinner wuessen

Wann Dir keng Grenzspinner Loscht hutt, schalt op de Grow Spinner. Och wann et net technesch dréit, wiisst et ëmmer erëm!

html

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

Nach eng Kéier ass dëse Spinner mat gebaut currentColor, sou datt Dir einfach säin Erscheinungsbild mat Textfaarf Utilities änneren kënnt . Hei ass et a blo, zesumme mat den ënnerstëtzten Varianten.

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>

Ausriichtung

Spinner am Bootstrap gi mat rems gebaut, currentColor, an display: inline-flex. Dëst bedeit datt se einfach änneren, nei faarweg a séier ausgeriicht kënne ginn.

Marge

Benotzt Margin Utilities wéi .m-5fir einfach Abstand.

html

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

Placement

Benotzt Flexbox Utilities , Float Utilities , oder Text Ausrichtung Utilities fir Spinner genau ze placéieren wou Dir se an all Situatioun braucht.

Flex

html

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

Lueden...

html

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

Schwëmmt

html

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

Text ausriichten

html

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

Gréisst

Füügt .spinner-border-sma .spinner-grow-smfir e méi klenge Spinner ze maachen dee séier an anere Komponenten benotzt ka ginn.

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>

Oder benotzt personaliséiert CSS oder Inline Stiler fir d'Dimensioune wéi néideg z'änneren.

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>

Knäppercher

Benotzt Spinner bannent Knäppercher fir unzeginn datt eng Handlung am Moment veraarbecht oder stattfënnt. Dir kënnt och den Text aus dem Spinner-Element austauschen a Knäppchen Text benotzen wéi néideg.

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

Variablen

Dobäi an v5.2.0

Als Deel vun der Entwécklung vu Bootstrap CSS Variablen Approche, benotzen Spinner elo lokal CSS Variablen op .spinner-bordera .spinner-growfir verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

Border Spinner Variablen:

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

Wuesse Spinner Variablen:

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

Fir béid Spinner gi kleng Spinnermodifikateur Klassen benotzt fir d'Wäerter vun dësen CSS Variablen ze aktualiséieren wéi néideg. Zum Beispill mécht d' .spinner-border-smKlass déi folgend:

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

Sass Variablen

$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

Benotzt fir d'CSS Animatioune fir eis Spinner ze kreéieren. Abegraff an scss/_spinners.scss.

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

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