Source

Spinners

Rewşa barkirinê ya pêkhateyek an rûpelek bi spinnerên Bootstrap, ku bi tevahî bi HTML, CSS, û bê JavaScript hatî çêkirin, destnîşan bikin.

Ji dor

Bootstrap "spinners" dikarin werin bikar anîn da ku di projeyên we de rewşa barkirinê nîşan bidin. Ew tenê bi HTML û CSS-ê têne çêkirin, tê vê wateyê ku hûn hewce ne JavaScript-ê ne ku wan biafirînin. Lêbelê, hûn ê hewceyê hin JavaScript-a xwerû bikin ku dîtina wan biguhezînin. Xuyabûn, lihevkirin û mezinbûna wan bi dersên meyên karûbar ên ecêb bi hêsanî têne xweş kirin.

Ji bo mebestên gihîştinê, her barkerek li vir tê de role="status"û hêlînek <span class="sr-only">Loading...</span>heye.

Sînor spinner

Ji bo nîşanek barkirinê ya sivik, spinnerên sînor bikar bînin.

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

Colors

Sînor spinner ji currentColorbo xwe bikar tîne border-color, tê vê wateyê ku hûn dikarin reng bi karûbarên rengê nivîsê xweş bikin. Hûn dikarin li ser spinner-a standard yek ji karûbarên rengê nivîsara me bikar bînin.

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

Çima border-colorkarûbar bikar neynin? Her spinner transparentsînorek ji bo kêmanî yek alî sînorek diyar dike, ji ber vê yekê .border-{color}karûbar dê vê yekê derbas bikin.

Spinner mezin dibe

Heke hûn ji spinnerek sînor hez nakin, veguherînin spinner-a mezin. Dema ku ew ji hêla teknîkî ve nezivirîne, ew çend caran mezin dibe!

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

Carek din, ev spinner bi ve hatî çêkirin currentColor, ji ber vê yekê hûn dikarin bi hêsanî xuyangê wê bi karûbarên rengê nivîsê biguhezînin . Li vir ew şîn e, digel guhertoyên piştgirî.

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

Alignment

Spinners di Bootstrap de bi rems, currentColor, û têne çêkirin display: inline-flex. Ev tê vê wateyê ku ew dikarin bi hêsanî mezinahî, ji nû ve werin reng kirin, û bi lez werin rêz kirin.

Margin

Karûbarên marjînal ên wekî .m-5ji bo veqetandina hêsan bikar bînin .

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

Cihkirin

Karûbarên flexbox , karûbarên float , an karûbarên hevrêzkirina nivîsê bikar bînin da ku spinneran tam li cîhê ku hûn di her rewşê de hewce ne bi cîh bikin.

Flex

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

Barkirin...

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

Floats

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

Text align

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

Mezinayî

Zêde bikin .spinner-border-smû .spinner-grow-smbikin ku spinnerek piçûktir çêbikin ku zû dikare di nav pêkhateyên din de were bikar anîn.

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

An jî, CSS-ya xwerû an şêwazên hundurîn bikar bînin da ku li gorî hewcedariyê pîvanan biguhezînin.

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

Buttons

Di nav bişkokan de spinneran bikar bînin da ku destnîşan bikin ku çalakiyek niha tête kirin an pêk tê. Her weha hûn dikarin nivîsê ji hêmana spinner biguhezînin û li gorî hewcedariyê nivîsa bişkojkê bikar bînin.

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