Spinners
Geef de laadstatus van een component of pagina aan met Bootstrap-spinners, volledig gebouwd met HTML, CSS en geen JavaScript.
Over
Bootstrap "spinners" kunnen worden gebruikt om de laadstatus in uw projecten te tonen. Ze zijn alleen gebouwd met HTML en CSS, wat betekent dat je geen JavaScript nodig hebt om ze te maken. U hebt echter wat aangepast JavaScript nodig om hun zichtbaarheid te wijzigen. Hun uiterlijk, uitlijning en maatvoering kunnen eenvoudig worden aangepast met onze geweldige hulpprogramma's.
Voor toegankelijkheidsdoeleinden bevat elke lader hier role="status"
en een geneste <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
mediaquery. Zie het
gedeelte over beperkte beweging van onze toegankelijkheidsdocumentatie .
Grens spinner
Gebruik de randspinners voor een lichtgewicht laadindicator.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Kleuren
De border spinner gebruikt currentColor
voor zijn border-color
, wat betekent dat u de kleur kunt aanpassen met hulpprogramma 's voor tekstkleur . U kunt elk van onze hulpprogramma's voor tekstkleur gebruiken op de standaard spinner.
<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
hulpprogramma's gebruiken? Elke randspinner specificeert een
transparent
rand voor ten minste één zijde, dus
.border-{color}
hulpprogramma's zouden die overschrijven.
Groeiende spinner
Als je geen zin hebt in een borderspinner, schakel dan over naar de kweekspinner. Hoewel het technisch gezien niet ronddraait, groeit het wel herhaaldelijk!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Nogmaals, deze spinner is gebouwd met currentColor
, dus je kunt het uiterlijk gemakkelijk veranderen met hulpprogramma's voor tekstkleur . Hier is het in het blauw, samen met de ondersteunde varianten.
<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>
Uitlijning
Spinners in Bootstrap zijn gebouwd met rem
s, currentColor
, en display: inline-flex
. Dit betekent dat ze gemakkelijk kunnen worden vergroot of verkleind, opnieuw kunnen worden gekleurd en snel kunnen worden uitgelijnd.
Marge
Gebruik margehulpprogramma's zoals .m-5
voor gemakkelijke spatiëring.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Plaatsing
Gebruik flexbox-hulpprogramma's , float-hulpprogramma's of hulpprogramma's voor tekstuitlijning om spinners precies daar te plaatsen waar u ze in elke situatie nodig hebt.
Buigen
<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>
drijft
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Tekst uitlijnen
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Maat
Voeg toe .spinner-border-sm
en .spinner-grow-sm
om een kleinere spinner te maken die snel in andere componenten kan worden gebruikt.
<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>
Of gebruik aangepaste CSS of inline-stijlen om de afmetingen naar behoefte te wijzigen.
<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>
Toetsen
Gebruik spinners binnen knoppen om aan te geven dat een actie momenteel wordt verwerkt of plaatsvindt. U kunt de tekst ook uit het spinnerelement verwisselen en indien nodig knoptekst gebruiken.
<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>