Ŝpiniloj
Indiku la ŝarĝan staton de komponanto aŭ paĝo per Bootstrap-spiniloj, konstruitaj tute kun HTML, CSS, kaj sen JavaScript.
Pri
Bootstrap "spinners" povas esti uzata por montri la ŝarĝan staton en viaj projektoj. Ili estas konstruitaj nur per HTML kaj CSS, tio signifas, ke vi ne bezonas JavaScript por krei ilin. Vi tamen bezonos iom da kutimo JavaScript por ŝanĝi ilian videblecon. Ilia aspekto, vicigo kaj grandeco povas esti facile personecigitaj per niaj mirindaj utilaj klasoj.
Por alireblecoj, ĉiu ŝargilo ĉi tie inkluzivas role="status"
kaj nestitan <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
amaskomunikila demando. Vidu la
sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .
Lima ŝpinisto
Uzu la randajn ŝpinilojn por malpeza ŝarĝa indikilo.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Koloroj
La randa ŝpinilo uzas currentColor
por sia border-color
, signifante ke vi povas personecigi la koloron per tekstkoloraj utilecoj . Vi povas uzi iun ajn el niaj tekstkoloraj iloj sur la norma ŝpinilo.
<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
utilecojn? Ĉiu limŝpinisto precizigas
transparent
limon por almenaŭ unu flanko, do
.border-{color}
utilecoj superregus tion.
Kreskanta ŝpinisto
Se vi ne ŝatas randan ŝpinilon, ŝanĝu al la kreskiga ŝpinilo. Kvankam ĝi teknike ne turniĝas, ĝi plurfoje kreskas!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Denove, ĉi tiu ŝpinilo estas konstruita per currentColor
, do vi povas facile ŝanĝi ĝian aspekton per tekstkoloraj utilecoj . Jen ĝi estas en blua, kune kun la subtenataj variantoj.
<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>
Vicigo
Ŝpiniloj en Bootstrap estas konstruitaj per rem
s, currentColor
, kaj display: inline-flex
. Ĉi tio signifas, ke ili povas facile esti regrandigi, rekolorigi kaj rapide vicigitaj.
Marĝeno
Uzu marĝenajn utilecojn kiel .m-5
por facila interspaco.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Lokigo
Uzu flexbox-servaĵojn , flosajn ilojn aŭ tekst -allinigajn ilojn por meti ŝpinilojn ĝuste kie vi bezonas ilin en ajna situacio.
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>
Flosiloj
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Teksto vicigi
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Grandeco
Aldonu .spinner-border-sm
kaj .spinner-grow-sm
fari pli malgrandan ŝpinilon, kiu povas rapide esti uzata ene de aliaj komponantoj.
<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>
Aŭ, uzu kutimajn CSS aŭ enliniajn stilojn por ŝanĝi la dimensiojn laŭbezone.
<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>
Butonoj
Uzu ŝpinilojn ene de butonoj por indiki ke ago estas nuntempe prilaborata aŭ okazanta. Vi ankaŭ povas interŝanĝi la tekston el la ŝpinelemento kaj uzi butontekston laŭbezone.
<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>