Spinnerit
Ilmoita komponentin tai sivun lataustila Bootstrap-spinnereillä, jotka on rakennettu kokonaan HTML-, CSS- ja ilman JavaScriptiä.
Noin
Bootstrapin "spinnereitä" voidaan käyttää näyttämään lataustilan projekteissasi. Ne on rakennettu vain HTML:llä ja CSS:llä, joten et tarvitse JavaScriptiä niiden luomiseen. Tarvitset kuitenkin mukautetun JavaScriptin muuttaaksesi niiden näkyvyyttä. Niiden ulkonäköä, kohdistusta ja kokoa voidaan helposti muokata upeilla hyödyllisyysluokillamme.
Esteettömyyssyistä jokainen lataaja sisältää role="status"
ja sisäkkäisen <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
mediakyselystä. Katso
esteettömyysdokumentaation osio liikkeen vähentämisestä .
Reunapyörä
Käytä reunapyöriä kevyeen lastausilmaisimeen.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
värit
Reunusspinneri käyttää currentColor
sitä border-color
, mikä tarkoittaa, että voit muokata väriä tekstin väriapuohjelmilla . Voit käyttää mitä tahansa tekstin värityökalujamme tavallisessa kehrässä.
<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
apuohjelmia? Jokainen reunuspyöritys määrittää
transparent
reunuksen ainakin yhdelle puolelle, joten
.border-{color}
apuohjelmat ohittavat sen.
Kasvava spinner
Jos et pidä reunuspyöristä, vaihda viljelyspinneriin. Vaikka se ei teknisesti pyöri, se kasvaa toistuvasti!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Jälleen kerran tämä spinner on rakennettu currentColor
-sovelluksella, joten voit helposti muuttaa sen ulkonäköä tekstin väriapuohjelmilla . Tässä se on sinisenä tuettujen varianttien kanssa.
<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>
Tasaus
Bootstrapin spinnerit on rakennettu rem
s:llä, currentColor
, ja display: inline-flex
. Tämä tarkoittaa, että niiden kokoa voidaan helposti muuttaa, värjätä uudelleen ja kohdistaa nopeasti.
Marginaali
Käytä marginaalin apuohjelmia , kuten .m-5
helpottaaksesi välilyöntejä.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Sijoitus
Käytä flexbox-apuohjelmia , float-apuohjelmia tai tekstin tasausapuohjelmia sijoittaaksesi spinnerit juuri sinne, missä tarvitset niitä missä tahansa tilanteessa.
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>
Kelluvat
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Tekstin tasaus
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Koko
Lisää .spinner-border-sm
ja .spinner-grow-sm
tee pienempi spinner, jota voidaan nopeasti käyttää muiden komponenttien sisällä.
<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>
Tai käytä mukautettuja CSS- tai sisäisiä tyylejä muuttaaksesi mittoja tarpeen mukaan.
<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>
Painikkeet
Käytä painikkeiden sisällä olevia pyöriä osoittamaan, että toiminto on parhaillaan käsittelyssä tai meneillään. Voit myös vaihtaa tekstin pois spinner-elementistä ja käyttää painikkeen tekstiä tarpeen mukaan.
<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>