Iispinners
Bonisa imeko yokulayisha yecandelo okanye iphepha eline-Bootstrap spinners, eyakhelwe ngokupheleleyo ngeHTML, CSS, kwaye akukho JavaScript.
Malunga
I-Bootstrap "spinners" ingasetyenziselwa ukubonisa imeko yokulayisha kwiiprojekthi zakho. Zakhelwe kuphela nge-HTML kunye neCSS, okuthetha ukuba awudingi iJavaScript ukuyidala. Uyakufuna, nangona kunjalo, iJavaScript yesiko ukuguqula ukubonakala kwayo. Inkangeleko yabo, ulungelelwaniso, kunye nobungakanani bunokwenziwa ngokulula kunye neeklasi zethu eziluncedo ezimangalisayo.
Ngeenjongo zokufikeleleka, umlayishi ngamnye apha uquka role="status"
kunye nendlwane <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
kumbuzo wemidiya. Jonga icandelo
leentshukumo ezincitshisiweyo kuxwebhu lwethu lofikelelo .
I-Border spinner
Sebenzisa i-spinners yomda kwisalathisi esilula sokulayisha.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Imibala
Umda we spinner usetyenziselwa currentColor
wona border-color
, oku kuthetha ukuba ungenza ngokusesikweni umbala ngezinto eziluncedo zombala wokubhaliweyo . Ungasebenzisa nayiphi na into yethu yombala wokubhaliweyo kwi-spinner eqhelekileyo.
<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
izinto eziluncedo? Umda ngamnye wesipinari ukhankanya
transparent
umda ubuncinane wecala elinye, ngoko ke
.border-{color}
izinto eziluncedo ziya kugqitha oko.
Ukukhula kwe-spinner
Ukuba awunqweneli i-spinner yomda, tshintshela kwi-spinner yokukhula. Ngelixa ingajiki ngokobuchwephesha, iyakhula ngokuphindaphindiweyo!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Kwakhona, le spinner yakhiwe nge currentColor
, ngoko ke unokutshintsha ngokulula inkangeleko yayo ngezixhobo zombala wokubhaliweyo . Nantsi iblue, kunye nezinto ezahlukeneyo ezixhaswayo.
<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>
Ulungelelwaniso
Iispinners eBootstrap zakhiwe nge rem
s, currentColor
, kunye display: inline-flex
. Oku kuthetha ukuba zinokuhlengahlengiswa ngokulula, zifakwe umbala kwakhona, kwaye zilungelelaniswe ngokukhawuleza.
Umda
Sebenzisa izinto eziluncedo zomda njengokwenza .m-5
izithuba ezilula.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Ukubekwa
Sebenzisa izinto eziluncedo ze-flexbox , izinto ezidadayo , okanye izinto zolungelelwaniso lombhalo ukubeka izijikelezi-ndlela kanye apho uzifuna khona kuyo nayiphi na imeko.
Flex
<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>
Izinto ezidadayo
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Ukulungelelanisa okubhaliweyo
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Ubungakanani
Yongeza .spinner-border-sm
kwaye .spinner-grow-sm
wenze i-spinner encinci enokuthi isetyenziswe ngokukhawuleza phakathi kwamanye amacandelo.
<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>
Okanye, sebenzisa i-CSS yesiko okanye izitayile ezingaphakathi ukuguqula imilinganiselo njengoko kufuneka.
<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>
Amaqhosha
Sebenzisa i-spinners ngaphakathi kwamaqhosha ukubonisa intshukumo ngoku okanye eyenzekayo. Ungatshintsha kwakhona umbhalo ngaphandle kwesipina kwaye usebenzise umbhalo weqhosha njengoko kufuneka.
<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
Izinto eziguquguqukayo
$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;
Amagama angundoqo
Isetyenziselwa ukwenza oopopayi be-CSS kwi-spinners zethu. Ibandakanyiwe kwi scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}