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="sr-only">Loading...</span>.
Border spinner
Gamitin ang mga border spinner para sa isang lightweight loading indicator.
Naglo-load...
Mga kulay
Ang border spinner ay gumagamit currentColornito 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.
Naglo-load...
Naglo-load...
Naglo-load...
Naglo-load...
Naglo-load...
Naglo-load...
Naglo-load...
Naglo-load...
Bakit hindi gumamit border-colorng mga utility? Ang bawat border spinner ay tumutukoy ng transparenthangganan 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!
Naglo-load...
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.
Naglo-load...
Naglo-load...
Naglo-load...
Naglo-load...
Naglo-load...
Naglo-load...
Naglo-load...
Naglo-load...
Pag-align
Ang mga spinner sa Bootstrap ay binuo gamit ang rems, currentColor, at display: inline-flex. Nangangahulugan ito na ang mga ito ay madaling mapalitan ang laki, recolored, at mabilis na ihanay.
Magdagdag .spinner-border-smat .spinner-grow-smgumawa ng mas maliit na spinner na mabilis na magagamit sa loob ng iba pang mga bahagi.
Naglo-load...
Naglo-load...
O kaya, gumamit ng custom na CSS o mga inline na istilo upang baguhin ang mga dimensyon kung kinakailangan.
Naglo-load...
Naglo-load...
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.