Abazunguruka
Erekana imiterere yikintu cyangwa urupapuro 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. 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>
.
prefers-reduced-motion
nibibazo 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 currentColor
ibyayo 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>
border-color
ibikoresho? Buri mupaka uzengurutsa
transparent
umupaka 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 rem
s currentColor
, na display: inline-flex
. Ibi bivuze ko byoroshye guhinduka, guhinduka, no guhuzwa vuba.
Margin
Koresha margin yingirakamaro nko .m-5
kumwanya 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>
<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-sm
no .spinner-grow-sm
gukora 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;
}
}