Spinners

Tilmaan xaaladda rarka ee qayb ama bogga leh xayndaabyada Bootstrap, oo lagu dhisay gebi ahaan HTML, CSS, oo aan lahayn JavaScript.

Boggan

Ku saabsan

Bootstrap "spinners" waxaa loo isticmaali karaa in lagu muujiyo xaalada rarka ee mashaariicdaada. Waxay ku dhismeen oo keliya HTML iyo CSS, taasoo la micno ah inaadan u baahnayn JavaScript si aad u abuurto. Waxaad, si kastaba ha ahaatee, u baahan doontaa qaar ka mid ah JavaScript caadadii si aad u beddesho muuqaalkooda. Muuqaalkooda, toosintooda, iyo cabbirkooda si fudud ayaa loogu habeyn karaa fasaladayada tamarta ee cajiibka ah.

Ujeedooyinka gelitaanka, rarayste kasta halkan waxa ku jira role="status"oo buul leh <span class="visually-hidden">Loading...</span>.

Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Wareegtada xadka

U isticmaal wareegyada xudduudaha si aad u hesho tilmaame rarista fudud.

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

Midabada

Wareegtada soohdinta ayaa currentColoru adeegsata border-color, taasoo la macno ah inaad ku beddeli karto midabka agabka midabka qoraalka ah . Waxaad isticmaali kartaa mid kasta oo ka mid ah agabkayaga midabka qoraalka ah ee spinner-ka caadiga ah.

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

Waa maxay sababta aan loo isticmaalin border-coloradeegyada? Wareeg kasta oo soohdintu waxa uu qeexayaa transparentxuduud ugu yaraan hal dhinac, si tas-hiilaadyadu .border-{color}ay meesha uga saaraan.

Spinner koraya

Haddi aanad jeclayn wareegtada soohdinta, u beddel spinner-ka koraan. Inkastoo aysan farsamo ahaan miiqin, haddana si isdaba joog ah ayay u koraan!

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

Mar labaad, spinner-kan waxaa lagu dhisay currentColor, si aad si fudud ugu beddeli karto muuqaalkiisa isticmaalka midabka qoraalka . Halkan waa buluug, oo ay la socdaan noocyada la taageeray.

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

Toosin

Spinners in Bootstrap waxaa lagu dhisay rems, currentColor, iyo display: inline-flex. Tani waxay ka dhigan tahay in si fudud loo cabbiri karo, loo midabayn karo, oo si degdeg ah loo toosin karo.

Margin

Isticmaal utility margin sida .m-5kala dheeraynta fudud.

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

Meelaynta

Isticmaal utility flexbox , sabbaynaysa utilities , ama qoraalka toosinta utilities si aad u dhigto spinners sida saxda ah meesha aad uga baahan tahay xaalad kasta.

Jilicsan

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Soodejinaya...

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

Sabayn

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

Isku toosinta qoraalka

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

Cabbirka

Ku dar .spinner-border-smoo .spinner-grow-smsi aad u samayso spinner yar oo si degdeg ah loo isticmaali karo gudaha qaybaha kale.

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

Ama, isticmaal CSS-ga caadiga ah ama qaababka khadka tooska ah si aad u beddesho cabbirrada hadba loo baahdo.

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

Badhamada

Isticmaal badhannada gudaha badhamada si aad u muujiso in ficil hadda la habeeyey ama dhacayo. Waxa kale oo aad ka beddeli kartaa qoraalka unugga lafdhabarta oo aad isticmaasho qoraalka badhanka haddii loo baahdo.

<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

Kala duwanaansho

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

Keyframes

Loo isticmaalo abuurista animations-ka CSS-ka ee spinners our. Waxaa ku scss/_spinners.scssjira

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

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