in English

Abazunguruka

Erekana imiterere yikintu cyangwa page 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. Kugaragara kwabo, 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.

html

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

html

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

html

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

html

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

html

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

Gushyira

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

Imiterere

html

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

Kuremera ...

html

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

Amagorofa

html

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

Guhuza inyandiko

html

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

html

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

html

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

html

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

html

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

CSS

Ibihinduka

Wongeyeho muri v5.2.0

Nkigice cya Bootstrap igenda ihinduka CSS ihindagurika, abizunguruka ubu bakoresha CSS yaho ihinduka .spinner-borderhamwe no .spinner-growkuzamura igihe-nyacyo cyo kwihindura. Indangagaciro za CSS zihinduka zashyizweho binyuze kuri Sass, so Sass yihariye iracyashyigikiwe, nayo.

Impinduka zambukiranya imipaka:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

Gukura kw'ibihinduka:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

Kubizunguruka byombi, mato mato mato yo guhindura ibyiciro akoreshwa muguhindura indangagaciro zibihinduka CSS nkuko bikenewe. Kurugero, .spinner-border-smishuri rikora ibi bikurikira:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Ibihinduka bya Sass

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