Spinnerid
Näidake komponendi või lehe laadimisolekut Bootstrapi keerurite abil, mis on ehitatud täielikult HTML-i, CSS-i ja ilma JavaScriptita.
Umbes
Bootstrapi "spinnereid" saab kasutada teie projektide laadimisoleku kuvamiseks. Need on loodud ainult HTML-i ja CSS-iga, mis tähendab, et nende loomiseks pole vaja JavaScripti. Nende nähtavuse sisselülitamiseks vajate siiski kohandatud JavaScripti. Nende välimust, joondamist ja suurust saab meie suurepäraste utiliitide abil hõlpsasti kohandada.
Juurdepääsetavuse huvides sisaldab iga laadur role="status"
ja pesastatud <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
meediumipäringust. Vaadake
meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .
Ääriste ketraja
Kerge laadimisnäidiku jaoks kasutage äärekeerutajaid.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Värvid
Ääriste keerutaja kasutab currentColor
selle jaoks border-color
, mis tähendab, et saate kohandada värvi tekstivärvi utiliitidega . Standardsel spinneril saate kasutada mis tahes meie tekstivärvi utiliiti.
<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
kommunaalteenuseid? Iga piirikeerutaja määrab
transparent
äärise vähemalt ühele küljele, nii et
.border-{color}
utiliidid alistaksid selle.
Kasvav spinner
Kui te ei armasta äärisvurrit, lülituge kasvuketrale. Kuigi see tehniliselt ei pöörle, kasvab see korduvalt!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Jällegi on see spinner koostatud rakendusega currentColor
, nii et saate selle välimust tekstivärvi utiliitidega hõlpsalt muuta . Siin on see sinine koos toetatud variantidega.
<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>
Joondamine
Bootstrapi spinnerid on üles ehitatud rem
s, currentColor
, ja display: inline-flex
. See tähendab, et nende suurust saab hõlpsasti muuta, värvida ja kiiresti joondada.
Marginaal
Kasutage veerise utiliite nagu .m-5
lihtsaks vahekauguseks.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Paigutus
Kasutage flexboxi utiliite , ujuki utiliite või teksti joondusutiliite, et paigutada spinnerid igas olukorras täpselt sinna, kus neid vajate.
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>
Ujukid
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Teksti joondamine
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Suurus
Lisage .spinner-border-sm
ja .spinner-grow-sm
tehke väiksem spinner, mida saab kiiresti teiste komponentide sees kasutada.
<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>
Või kasutage kohandatud CSS-i või tekstisiseseid stiile, et vajadusel mõõtmeid muuta.
<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>
Nupud
Kasutage nuppude sees olevaid pöörlejaid, et näidata, et toiming on hetkel töötlemisel või toimumisel. Samuti võite teksti ketruselemendist välja vahetada ja vajadusel nuputeksti kasutada.
<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
Muutujad
$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;
Võtmekaadrid
Kasutatakse meie spinneritele CSS-animatsioonide loomiseks. Sisaldub scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}