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>.
Border spinner
Använd kantspinnarna för en lätt lastindikator.
Läser in...
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.
Läser in...
Läser in...
Läser in...
Läser in...
Läser in...
Läser in...
Läser in...
Läser in...
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!
Läser in...
Å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.
Läser in...
Läser in...
Läser in...
Läser in...
Läser in...
Läser in...
Läser in...
Läser in...
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.
Lägg till .spinner-border-smoch .spinner-grow-smför att göra en mindre spinner som snabbt kan användas inom andra komponenter.
Läser in...
Läser in...
Eller använd anpassade CSS- eller inline-stilar för att ändra måtten efter behov.
Läser in...
Läser in...
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.