Spinners
Indika l-istat tat-tagħbija ta 'komponent jew paġna bi spinners Bootstrap, mibnija kompletament b'HTML, CSS, u l-ebda JavaScript.
Dwar
Bootstrap "spinners" jistgħu jintużaw biex juru l-istat tat-tagħbija fil-proġetti tiegħek. Huma mibnija biss b'HTML u CSS, jiġifieri m'għandekx bżonn JavaScript biex toħloqhom. Madankollu, ser ikollok bżonn xi JavaScript personalizzat biex taqleb il-viżibilità tagħhom. Id-dehra, l-allinjament u d-daqs tagħhom jistgħu jiġu personalizzati faċilment bil-klassijiet ta 'utilità aqwa tagħna.
Għal skopijiet ta' aċċessibbiltà, kull loader hawn jinkludi role="status"
u <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
-mistoqsija tal-midja. Ara t-
taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .
Spinner tal-fruntiera
Uża l-ispinners tal-fruntiera għal indikatur ħafif tat-tagħbija.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Kuluri
L-ispinner tal-fruntiera juża currentColor
għal tiegħu border-color
, li jfisser li tista 'tippersonalizza l-kulur b'utilitajiet tal-kulur tat -test . Tista 'tuża kwalunkwe utilitajiet tal-kulur tat-test tagħna fuq l-ispinner standard.
<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
l-utilitajiet? Kull spinner tal-fruntiera jispeċifika
transparent
fruntiera għal mill-inqas naħa waħda, għalhekk
.border-{color}
l-utilitajiet jegħlbu dak.
Spinner li qed jikber
Jekk ma tħobbx spinner tal-fruntiera, aqleb għall-ispinner tat-tkabbir. Filwaqt li teknikament ma jdurx, jikber ripetutament!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Għal darb'oħra, dan l-ispinner huwa mibni b' currentColor
, sabiex tkun tista' faċilment tibdel id-dehra tagħha b'utilitajiet tal- kulur tat-test . Hawnhekk huwa bil-blu, flimkien mal-varjanti appoġġjati.
<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>
Allinjament
Spinners f'Bootstrap huma mibnija b rem
's, currentColor
, u display: inline-flex
. Dan ifisser li jistgħu faċilment jiġu ridimensjonati, ikkuluriti mill-ġdid, u allinjati malajr.
Marġni
Uża utilitajiet tal-marġni bħal .m-5
għal spazjar faċli.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Pjazzament
Uża utilitajiet flexbox , utilitajiet float , jew utilitajiet ta ' allinjament tat-test biex tpoġġi spinners eżattament fejn għandek bżonnhom fi kwalunkwe sitwazzjoni.
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>
Sufruni
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Allinjament tat-test
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Daqs
Żid .spinner-border-sm
u .spinner-grow-sm
biex tagħmel spinner iżgħar li jista 'jintuża malajr f'komponenti oħra.
<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>
Jew, uża CSS personalizzati jew stili inline biex tbiddel id-dimensjonijiet kif meħtieġ.
<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>
Buttuni
Uża spinners fil-buttuni biex tindika azzjoni bħalissa qed tipproċessa jew qed isseħħ. Tista 'wkoll tbiddel it-test mill-element spinner u tutilizza test tal-buttuna kif meħtieġ.
<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>