Source

Abazunguruka

Erekana imiterere yikintu cyangwa page hamwe na Bootstrap izunguruka, yubatswe rwose hamwe na HTML, CSS, kandi nta JavaScript.

Ibyerekeye

Bootstrap "spinners" irashobora gukoreshwa kugirango werekane imiterere yikigo mumishinga yawe. Zubatswe gusa na HTML na CSS, bivuze ko udakeneye JavaScript kugirango ubireme. Uzakenera, ariko, ukeneye JavaScript yihariye kugirango uhindure neza. Kugaragara kwabo, guhuza, hamwe nubunini birashobora guhindurwa byoroshye hamwe namasomo yacu yingirakamaro.

Kubigamije kugerwaho, buri mutware hano arimo role="status"kandi yashizwemo <span class="sr-only">Loading...</span>.

Umupaka

Koresha umupaka uzenguruka kumipaka yoroheje.

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

Amabara

Imipaka izenguruka ikoresha currentColoribyayo border-color, bivuze ko ushobora guhitamo ibara hamwe ninyandiko yibara ryingirakamaro . Urashobora gukoresha icyaricyo cyose cyanditse cyibikoresho byingirakamaro kumurongo usanzwe.

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

Ubona gute ukoresheje border-coloribikoresho? Buri mupaka uzenguruka transparentumupaka byibura uruhande rumwe, bityo .border-{color}ibikorwa byingenzi birenga ibyo.

Gukura

Niba udashaka kwambukiranya imipaka, hindukira kuri gukura. Nubwo idahinduka mubuhanga, irakura inshuro nyinshi!

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

Ubundi na none, iyi spin yubatswe hamwe currentColor, kuburyo ushobora guhindura byoroshye isura yayo hamwe ninyandiko yibara ryingirakamaro . Hano iri mubururu, hamwe nibishyigikirwa.

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

Guhuza

Kuzunguruka muri Bootstrap yubatswe hamwe na rems currentColor, na display: inline-flex. Ibi bivuze ko byoroshye guhinduka, guhinduka, no guhuzwa vuba.

Margin

Koresha margin yingirakamaro nko .m-5kumwanya woroshye.

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

Gushyira

Koresha ibikorwa bya flexbox , kureremba , cyangwa ibikoresho byo guhuza inyandiko kugirango ushire ibizunguruka neza aho ubikeneye mubihe byose.

Imiterere

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

Amagorofa

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

Guhuza inyandiko

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

Ingano

Ongeraho .spinner-border-smno .spinner-grow-smgukora uruziga ruto rushobora gukoreshwa vuba mubindi bice.

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

Cyangwa, koresha CSS yihariye cyangwa inline yuburyo kugirango uhindure ibipimo nkuko bikenewe.

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

Utubuto

Koresha izunguruka muri buto kugirango werekane igikorwa kirimo gutunganywa cyangwa kibaye. Urashobora kandi guhinduranya inyandiko hanze yikintu hanyuma ugakoresha inyandiko ya buto nkuko bikenewe.

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