Spinners
Ratidza mamiriro ekurodha echikamu kana peji ine Bootstrap spinners, yakavakwa zvachose neHTML, CSS, uye isina JavaScript.
About
Bootstrap "spinners" inogona kushandiswa kuratidza mamiriro ekurodha mumapurojekiti ako. Iwo anovakwa chete neHTML neCSS, zvichireva kuti haudi chero JavaScript kuti uzvigadzire. Iwe, zvakadaro, uchada imwe tsika JavaScript kuti uchinje kuoneka kwavo. Chitarisiko chavo, kurongeka, uye saizi zvinogona kugadziridzwa zviri nyore nemakirasi edu anoshamisa ekushandisa.
Nezvinangwa zvekuwanikwa, chimwe nechimwe chinorodha pano chinosanganisira role="status"
uye nested <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
nemubvunzo wenhau. Ona chikamu
chakaderedzwa chezvinyorwa zvedu zvekusvikika .
Border spinner
Shandisa mabhodha spinners kune lightweight kurodha chiratidzo.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Colors
Iyo bhodha spinner inoshandisa currentColor
yayo border-color
, zvichireva kuti iwe unogona kugadzirisa iyo ruvara nemavara mavara ekushandisa . Iwe unogona kushandisa chero yedu mavara mavara ekushandisa pane yakajairwa spinner.
<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
zvishandiso? Imwe neimwe bhodha spinner inotsanangura muganho werinoti
transparent
divi rimwe chete, saka
.border-{color}
zvekushandisa zvaizopfuura izvo.
Kukura spinner
Kana iwe usingafarire bhodha spinner, chinja kune inokura spinner. Kunyange isingatenderere nehunyanzvi, inoramba ichikura!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Zvekare, iyi spinner inovakwa ne currentColor
, saka iwe unogona nyore kushandura chimiro chayo nemavara mavara ekushandisa . Heino iri mubhuruu, pamwe chete nemisiyano inotsigirwa.
<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>
Alignment
Spinner muBootstrap inovakwa ne rem
s, currentColor
, uye display: inline-flex
. Izvi zvinoreva kuti dzinogona kugadziridzwa nyore, kudzokororwa, uye nekukasira kurongeka.
Margin
Shandisa margin utilities senge .m-5
kurerukira nzvimbo.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Placement
Shandisa flexbox utilities , float utilities , kana mameseji alignment utilities kuti uise maspinner paunoda chero mamiriro ezvinhu.
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>
Anoyangarara
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Rongedza mavara
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Size
Wedzera .spinner-border-sm
uye .spinner-grow-sm
kugadzira diki spinner inogona kukurumidza kushandiswa mukati mezvimwe zvikamu.
<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>
Kana, shandisa tsika CSS kana inline masitaera kushandura zviyero sezvinodiwa.
<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>
Mabhatani
Shandisa ma spinners mukati memabhatani kuratidza chiitiko chirikugadziriswa kana kuitika. Iwe unogona zvakare kuchinja mameseji kunze kweiyo spinner element uye shandisa bhatani mameseji sezvinodiwa.
<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
Variables
$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;
Keyframes
Inoshandiswa kugadzira iyo CSS animations kune edu maspinner. Inosanganisirwa mu scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}