in English

Spinners

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

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 isticmaalka yaabka leh.

Ujeedooyinka gelitaanka, rarayste kasta halkan waxa ku jira role="status"oo buul leh <span class="sr-only">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="sr-only">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="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>
Waa maxay sababta aan loo isticmaalin border-coloradeegyada? Wareeg kasta oo soohdintu wuxuu qeexayaa transparentxadka ugu yaraan hal dhinac, si tas-hiilaadyadu .border-{color}ay meesha uga saaraan.

Spinner koraya

Haddi aanad jeclayn milkiilaha xudduudaha, u beddel spinner-ka kora. Inkastoo aysan farsamo ahaan miiqin, si isdaba joog ah ayay u koraan!

<div class="spinner-grow" role="status">
  <span class="sr-only">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="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>

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="sr-only">Loading...</span>
</div>

Meelaynta

Isticmaal utility flexbox , sabbaynaysa utilities , ama qalabka toosinta qoraalka si sax ah meesha aad uga baahan tahay xaalad kasta.

Jilicsan

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
Soodejinaya... 
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

Sabayn

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Isku toosinta qoraalka

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

Cabbirka

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

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

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="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>

Badhamada

Isticmaal badhannada ku dhex jira badhamada si aad u muujiso in ficil hadda la habeeyey ama dhacayo. Waxa kale oo aad ka beddeli kartaa qoraalka curiyaha 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="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>