Spinnere
Angiv indlæsningstilstanden for en komponent eller side med Bootstrap-spinnere, bygget udelukkende med HTML, CSS og uden JavaScript.
Om
Bootstrap "spinnere" kan bruges til at vise indlæsningstilstanden i dine projekter. De er kun bygget med HTML og CSS, hvilket betyder, at du ikke behøver noget JavaScript for at oprette dem. Du skal dog bruge noget tilpasset JavaScript for at skifte deres synlighed. Deres udseende, justering og størrelse kan nemt tilpasses med vores fantastiske hjælpeklasser.
Af tilgængelighedsformål inkluderer hver indlæser her role="status"
og en indlejret <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
medieforespørgslen. Se afsnittet om
reduceret bevægelse i vores tilgængelighedsdokumentation .
Border spinner
Brug kantspinnerne til en letvægtsbelastningsindikator.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Farver
Border spinneren bruger currentColor
til sin border-color
, hvilket betyder at du kan tilpasse farven med tekstfarveværktøjer . Du kan bruge alle vores tekstfarveværktøjer på standardspinneren.
<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
hjælpeprogrammer? Hver border spinner angiver en
transparent
kant for mindst én side, så
.border-{color}
hjælpeprogrammer ville tilsidesætte det.
Voksende spinner
Hvis du ikke har lyst til en border spinner, så skift til grow spinneren. Selvom det teknisk set ikke spinner, vokser det gentagne gange!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Endnu en gang er denne spinner bygget med currentColor
, så du nemt kan ændre dens udseende med tekstfarveværktøjer . Her er den i blåt sammen med de understøttede varianter.
<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>
Justering
Spinnere i Bootstrap er bygget med rem
s, currentColor
, og display: inline-flex
. Dette betyder, at de nemt kan ændres i størrelse, omfarves og hurtigt justeres.
Margin
Brug marginværktøjer som .m-5
for nem afstand.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Placering
Brug flexbox-værktøjer , float-værktøjer eller tekstjusteringsværktøjer til at placere spinnere præcis, hvor du har brug for dem i enhver situation.
Flex
<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>
Flyder
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Tekstjustering
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Størrelse
Tilføj .spinner-border-sm
og .spinner-grow-sm
for at lave en mindre spinner, der hurtigt kan bruges i andre 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 brug tilpassede CSS- eller inline-stile til at ændre dimensionerne 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>
Knapper
Brug spinnere i knapperne til at angive, at en handling i øjeblikket behandles eller finder sted. Du kan også skifte teksten ud af spinner-elementet og bruge knaptekst 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>