Spinnere

Angi lastestatusen til en komponent eller side med Bootstrap-spinnere, bygget utelukkende med HTML, CSS og uten JavaScript.

På denne siden

Om

Bootstrap "spinnere" kan brukes til å vise lastestatusen i prosjektene dine. De er kun bygget med HTML og CSS, noe som betyr at du ikke trenger noe JavaScript for å lage dem. Du vil imidlertid trenge litt tilpasset JavaScript for å endre deres synlighet. Utseendet, justeringen og størrelsen deres kan enkelt tilpasses med våre fantastiske verktøyklasser.

For tilgjengelighetsformål inkluderer hver laster her role="status"og en nestet <span class="visually-hidden">Loading...</span>.

Animasjonseffekten til denne komponenten er avhengig av prefers-reduced-motionmediesøket. Se delen for redusert bevegelse i tilgjengelighetsdokumentasjonen vår .

Border spinner

Bruk kantspinnerne for en lett lasteindikator.

html

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

Farger

Kantspinneren bruker currentColorfor sin border-color, noe som betyr at du kan tilpasse fargen med tekstfargeverktøy . Du kan bruke alle våre tekstfargeverktøy på standardspinneren.

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>

Hvorfor ikke bruke border-colorverktøy? Hver kantspinner spesifiserer en transparentkant for minst én side, så .border-{color}verktøy vil overstyre det.

Voksende spinner

Hvis du ikke har lyst på en border spinner, bytt til grow spinneren. Selv om den teknisk sett ikke snurrer, vokser den gjentatte ganger!

html

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

Nok en gang er denne spinneren bygget med currentColor, slik at du enkelt kan endre utseendet med tekstfargeverktøy . Her er den i blått, sammen med de støttede variantene.

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>

Justering

Spinnere i Bootstrap er bygget med rems, currentColor, og display: inline-flex. Dette betyr at de enkelt kan endre størrelse, farge på nytt og raskt justeres.

Margin

Bruk marginverktøy som .m-5for enkel avstand.

html

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

Plassering

Bruk flexbox-verktøy , float-verktøy eller tekstjusteringsverktøy for å plassere spinnere akkurat der du trenger dem i enhver situasjon.

Flex

html

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

Laster inn...

html

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

Flyter

html

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

Tekstjustering

html

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

Størrelse

Legg til .spinner-border-smog .spinner-grow-smfor å lage en mindre spinner som raskt kan brukes i andre komponenter.

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>

Eller bruk egendefinerte CSS- eller innebygde stiler for å endre dimensjonene etter behov.

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>

Knapper

Bruk spinnere i knappene for å indikere at en handling behandles eller finner sted. Du kan også bytte teksten ut av spinnerelementet og bruke knappetekst etter behov.

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

Variabler

Lagt til i v5.2.0

Som en del av Bootstraps utviklende tilnærming til CSS-variabler, bruker spinnere nå lokale CSS-variabler på .spinner-borderog .spinner-growfor forbedret sanntidstilpasning. Verdier for CSS-variablene settes via Sass, så Sass-tilpasning støttes fortsatt også.

Border spinner variabler:

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

Voksende spinnervariabler:

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

For begge spinnere brukes små spinner-modifikatorklasser for å oppdatere verdiene til disse CSS-variablene etter behov. For eksempel gjør .spinner-border-smklassen følgende:

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

Sass variabler

$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

Brukes til å lage CSS-animasjoner for våre spinnere. Inkludert i scss/_spinners.scss.

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

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