Spinnare

Ange laddningstillståndet för en komponent eller sida med Bootstrap-spinnare, byggda helt med HTML, CSS och inget JavaScript.

På den här sidan

Handla om

Bootstrap "spinners" kan användas för att visa laddningstillståndet i dina projekt. De är byggda endast med HTML och CSS, vilket innebär att du inte behöver något JavaScript för att skapa dem. Du kommer dock att behöva lite anpassat JavaScript för att växla deras synlighet. Deras utseende, inriktning och storlek kan enkelt anpassas med våra fantastiska verktygsklasser.

För tillgänglighetssyften inkluderar varje laddare här role="status"och en kapslad <span class="visually-hidden">Loading...</span>.

Animeringseffekten av denna komponent beror på prefers-reduced-motionmediefrågan. Se avsnittet för reducerad rörelse i vår tillgänglighetsdokumentation .

Border spinner

Använd kantspinnarna för en lätt lastindikator.

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

Färger

Kantspinnaren använder currentColorför sin border-color, vilket innebär att du kan anpassa färgen med textfärgverktyg . Du kan använda alla våra textfärgverktyg på standardsnurran.

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

Varför inte använda border-colorverktyg? Varje kantspinnare anger en transparentkant för minst en sida, så .border-{color}verktyg skulle åsidosätta det.

Växande spinner

Om du inte är sugen på en border spinner, byt till grow spinner. Även om det tekniskt sett inte snurrar, växer det flera gånger!

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

Återigen är den här spinnern byggd med currentColor, så att du enkelt kan ändra dess utseende med textfärgverktyg . Här är den i blått, tillsammans med de varianter som stöds.

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

Inriktning

Spinnare i Bootstrap är byggda med rems, currentColor, och display: inline-flex. Detta innebär att de enkelt kan ändras i storlek, färgas om och snabbt justeras.

Marginal

Använd marginalverktyg som .m-5för lätt avstånd.

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

Placering

Använd flexbox-verktyg , flytverktyg eller textjusteringsverktyg för att placera spinnare exakt där du behöver dem i alla situationer.

Böja

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

Läser in...

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

Flyter

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

Textjustering

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

Storlek

Lägg till .spinner-border-smoch .spinner-grow-smför att göra en mindre spinner som snabbt kan användas inom andra komponenter.

<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 använd anpassade CSS- eller inline-stilar för att ändra måtten efter behov.

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

Knappar

Använd spinnare inom knappar för att indikera att en åtgärd för närvarande bearbetas eller äger rum. Du kan också byta ut texten från spinnerelementet och använda knapptext efter behov.

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

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

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;

Nyckelrutor

Används för att skapa CSS-animationer för våra spinnare. Ingår 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;
  }
}