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...
Why not use border-color utilities? Each border spinner specifies a transparent border for at least one side, so .border-{color} utilities would override that.
Growing spinner
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
Loading...
Once again, this spinner is built with currentColor, so you can easily change its appearance with text color utilities. Here it is in blue, along with the supported variants.
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Alignment
Spinners in Bootstrap are built with rems, currentColor, and display: inline-flex. This means they can easily be resized, recolored, and quickly aligned.
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.