Spinnare
Ange laddningstillståndet för en komponent eller sida med Bootstrap-spinnare, byggda helt med HTML, CSS och inget JavaScript.
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="sr-only">Loading...</span>
.
prefers-reduced-motion
mediefrå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="sr-only">Loading...</span>
</div>
Färger
Kantspinnaren använder currentColor
fö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="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>
border-color
verktyg? Varje kantspinnare anger en
transparent
kant 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="sr-only">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="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>
Inriktning
Spinnare i Bootstrap är byggda med rem
s, 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-5
för lätt avstånd.
<div class="spinner-border m-5" role="status">
<span class="sr-only">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="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
Flyter
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Textjustering
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Storlek
Lägg till .spinner-border-sm
och .spinner-grow-sm
fö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="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">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="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">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="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>