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...
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...
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...
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...
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.
Legg til .spinner-border-smog .spinner-grow-smfor å lage en mindre spinner som raskt kan brukes i andre komponenter.
Laster inn...
Laster inn...
Eller bruk egendefinerte CSS- eller innebygde stiler for å endre dimensjonene etter behov.
Laster inn...
Laster inn...
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.