Abazunguruka

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

Kuriyi page

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. Isura yabo, guhuza, hamwe nubunini birashobora guhindurwa byoroshye hamwe namasomo yacu yingirakamaro.

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

Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motionnibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .

Umupaka

Koresha umupaka uzenguruka kumipaka yoroheje yipakurura.

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

Amabara

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

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

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

Gukura

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

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

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

Gushyira

Koresha ibikorwa bya flexbox , ibikoresho bireremba , 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="visually-hidden">Loading...</span>
  </div>
</div>

Kuremera ...

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

Amagorofa

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

Guhuza inyandiko

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

Ibihinduka

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

Urufunguzo

Byakoreshejwe mugukora animasiyo ya CSS kubazunguruka. Harimo scss/_spinners.scss.

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

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