Mga Spinner
Ipahiwatig ang estado ng paglo-load ng isang bahagi o page na may mga Bootstrap spinner, na ganap na binuo gamit ang HTML, CSS, at walang JavaScript.
Tungkol sa
Maaaring gamitin ang "mga spinner" ng Bootstrap upang ipakita ang estado ng paglo-load sa iyong mga proyekto. Binuo lang ang mga ito gamit ang HTML at CSS, ibig sabihin, hindi mo kailangan ng anumang JavaScript upang gawin ang mga ito. Gayunpaman, kakailanganin mo ng ilang custom na JavaScript upang i-toggle ang kanilang visibility. Ang kanilang hitsura, pagkakahanay, at sukat ay madaling ma-customize sa aming mga kamangha-manghang mga klase ng utility.
Para sa mga layunin ng accessibility, ang bawat loader dito ay may kasamang role="status"
at isang nested <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
query ng media. Tingnan ang
seksyon ng pinababang paggalaw ng aming dokumentasyon ng accessibility .
Border spinner
Gamitin ang mga border spinner para sa isang lightweight loading indicator.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Mga kulay
Ang border spinner ay gumagamit currentColor
nito border-color
, ibig sabihin, maaari mong ipasadya ang kulay gamit ang mga gamit ng kulay ng teksto . Maaari mong gamitin ang alinman sa aming mga gamit sa kulay ng teksto sa karaniwang 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
ng mga utility? Ang bawat border spinner ay tumutukoy ng
transparent
hangganan para sa hindi bababa sa isang panig, kaya
.border-{color}
i-override iyon ng mga utility.
Lumalagong spinner
Kung hindi mo gusto ang isang border spinner, lumipat sa grow spinner. Bagama't hindi ito teknikal na umiikot, paulit-ulit itong lumalaki!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Muli, ang spinner na ito ay binuo gamit ang currentColor
, kaya madali mong mababago ang hitsura nito gamit ang mga gamit sa kulay ng teksto . Narito ito sa asul, kasama ang mga sinusuportahang variant.
<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>
Pag-align
Ang mga spinner sa Bootstrap ay binuo gamit ang rem
s, currentColor
, at display: inline-flex
. Nangangahulugan ito na ang mga ito ay madaling mapalitan ang laki, recolored, at mabilis na ihanay.
Margin
Gumamit ng mga margin utility tulad .m-5
ng para sa madaling espasyo.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Paglalagay
Gumamit ng flexbox utilities , float utilities , o text alignment utilities upang ilagay ang mga spinner nang eksakto kung saan mo kailangan ang mga ito sa anumang sitwasyon.
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>
Lumulutang
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
I-align ang text
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Sukat
Magdagdag .spinner-border-sm
at .spinner-grow-sm
gumawa ng mas maliit na spinner na mabilis na magagamit sa loob ng iba pang mga bahagi.
<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>
O kaya, gumamit ng custom na CSS o mga inline na istilo upang baguhin ang mga dimensyon kung kinakailangan.
<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>
Mga Pindutan
Gumamit ng mga spinner sa loob ng mga button upang isaad ang isang aksyon na kasalukuyang pinoproseso o nagaganap. Maaari mo ring palitan ang teksto mula sa elemento ng spinner at gamitin ang text ng button kung kinakailangan.
<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
Mga variable
$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;
Mga Keyframe
Ginagamit para sa paglikha ng mga animation ng CSS para sa aming mga spinner. Kasama sa scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}