Source

Spinnere

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

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="sr-only">Loading...</span>.

Border spinner

Bruk kantspinnerne for en lett lasteindikator.

Laster inn...
<div class="spinner-border" role="status">
  <span class="sr-only">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.

Laster inn...
Laster inn...
Laster inn...
Laster inn...
Laster inn...
Laster inn...
Laster inn...
Laster inn...
<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">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!

Laster inn...
<div class="spinner-grow" role="status">
  <span class="sr-only">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.

Laster inn...
Laster inn...
Laster inn...
Laster inn...
Laster inn...
Laster inn...
Laster inn...
Laster inn...
<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">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.

Laster inn...
<div class="spinner-border m-5" role="status">
  <span class="sr-only">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

Laster inn...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
Laster inn...
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

Flyter

Laster inn...
<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Tekstjustering

Laster inn...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">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.

Laster inn...
Laster inn...
<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

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

Laster inn...
Laster inn...
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">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.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">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>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">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>