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ö, kohdistus ja koko on helposti mukautettavissa upeilla hyödyllisyysluokillamme.
Esteettömyyssyistä jokainen lataaja sisältää role="status"
ja sisäkkäisen <span class="visually-hidden">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="visually-hidden">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="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
border-color
apuohjelmia? Jokainen reunuspyörijä määrittää
transparent
reunuksen ainakin yhdelle puolelle, joten
.border-{color}
apuohjelmat ohittavat sen.
Kasvava spinner
Jos et pidä reunapyörästä, vaihda viljelyspinneriin. Vaikka se ei teknisesti pyöri, se kasvaa toistuvasti!
<div class="spinner-grow" role="status">
<span class="visually-hidden">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="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">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="visually-hidden">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="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
Kelluvat
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Tekstin tasaus
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">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="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">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="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Painikkeet
Käytä painikkeiden sisällä olevia pyöriä osoittamaan, että toiminto on parhaillaan käsittelyssä tai käynnissä. 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="visually-hidden">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="visually-hidden">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>
Sass
Muuttujat
$spinner-width: 2rem;
$spinner-height: $spinner-width;
$spinner-vertical-align: -.125em;
$spinner-border-width: .25em;
$spinner-animation-speed: .75s;
$spinner-width-sm: 1rem;
$spinner-height-sm: $spinner-width-sm;
$spinner-border-width-sm: .2em;
Avainkehykset
Käytetään CSS-animaatioiden luomiseen spinnereillemme. Mukana scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}