Abavuzi b’ebiwujjo
Laga embeera y'okutikka ekitundu oba omuko nga guliko Bootstrap spinners, ezizimbibwa yonna ne HTML, CSS, era nga tewali JavaScript.
Ku
Bootstrap “spinners” zisobola okukozesebwa okulaga embeera y’okutikka mu pulojekiti zo. Zizimbibwa ne HTML ne CSS zokka, ekitegeeza nti teweetaaga JavaScript yonna okuzikola. Kyokka ojja kwetaaga JavaScript ezimu ez’enjawulo okukyusa engeri gye zirabika. Endabika yaabwe, okukwatagana, n’obunene bwazo bisobola bulungi okulongoosebwa n’ebibiina byaffe eby’omugaso ebyewuunyisa.
Ku lw'ebigendererwa by'okutuuka, buli loader wano erimu role="status"
ne nested <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
kubuuza kw'emikutu. Laba ekitundu
ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .
Omuwuzi w’ensalo
Kozesa border spinners okufuna ekiraga nti olina okutikka ekizitowa.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Langi za langi
Ensalosalo spinner ekozesa currentColor
ku yaayo border-color
, ekitegeeza osobola okulongoosa langi n'ebikozesebwa langi y'ebiwandiiko . Osobola okukozesa ekimu ku bikozesebwa byaffe ebya langi y'ebiwandiiko ku spinner eya bulijjo.
<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
bikozesebwa mu bulamu obwa bulijjo? Buli border spinner eraga
transparent
ensalosalo waakiri ku ludda lumu, kale
.border-{color}
utilities zandisaze ekyo.
Okukula nga spinner
Bw’oba toyagala nnyo border spinner, kyusa ogende ku grow spinner. Wadde nga mu by’ekikugu tewuuta, ekula enfunda n’enfunda!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Nate, spinner eno ezimbiddwa ne currentColor
, kale osobola bulungi okukyusa endabika yaayo n'ebikozesebwa ebya langi y'ebiwandiiko . Wano eri mu langi ya bbululu, wamu n’enjawulo eziwagirwa.
<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>
Okukwatagana
Spinners mu Bootstrap zizimbibwa ne rem
s, currentColor
, ne display: inline-flex
. Kino kitegeeza nti zisobola bulungi okukyusa obunene, okuzikyusa langi, n’okuzikwataganya amangu.
Omusitale
Kozesa margin utilities nga .m-5
for easy spacing.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Okuteekebwa mu kifo
Kozesa flexbox utilities , float utilities , oba text alignment utilities okuteeka spinners wennyini w’ozeetaaga mu mbeera yonna.
Okugooma
<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>
Ebitengejja
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Ebiwandiiko bikwataganya
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Obunene
Okwongerako .spinner-border-sm
era .spinner-grow-sm
okukola spinner entono esobola okukozesebwa amangu munda mu bitundu ebirala.
<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>
Oba, kozesa custom CSS oba inline styles okukyusa ebipimo nga bwe kyetaagisa.
<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>
Ebikondo ebiyitibwa Buttons
Kozesa spinners munda mu buttons okulaga ekikolwa mu kiseera kino nga kikola oba nga kigenda mu maaso. Oyinza n'okuwanyisiganya ebiwandiiko okuva mu elementi ya spinner n'okozesa ebiwandiiko bya button nga bwe kyetaagisa.
<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>