Abasiba ebiwujjo

Laga embeera y'okutikka ekitundu oba omuko nga guliko Bootstrap spinners, ezizimbibwa yonna ne HTML, CSS, era nga tewali JavaScript.

Ku muko guno

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="visually-hidden">Loading...</span>.

Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza 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="visually-hidden">Loading...</span>
</div>

Langi za langi

Ensalosalo spinner ekozesa currentColorku 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="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>

Lwaki tokozesa border-colorbikozesebwa mu bulamu obwa bulijjo? Buli border spinner eraga transparentensalosalo 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="visually-hidden">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="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>

Okukwatagana

Spinners mu Bootstrap zizimbibwa ne rems, currentColor, ne display: inline-flex. Kino kitegeeza nti zisobola bulungi okukyusa obunene, okuzikyusa langi, n’okuzikwataganya amangu.

Omusitale

Kozesa margin utilities nga .m-5for easy spacing.

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">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="visually-hidden">Loading...</span>
  </div>
</div>

Okutikka...

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Ebitengejja

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Ebiwandiiko bikwataganya

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Obunene

Okwongerako .spinner-border-smera .spinner-grow-smokukola spinner entono esobola okukozesebwa amangu munda mu bitundu ebirala.

<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>

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="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">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="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 nga bwe kiri

Enkyukakyuka ezikyukakyuka

$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;

Ebisumuluzo ebikulu

Ekozesebwa okukola ebifaananyi bya CSS ebya spinners zaffe. Ebirimu mu scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}