Egy komponens vagy oldal betöltési állapotának jelzése Bootstrap spinnerekkel, amelyek teljes egészében HTML-lel, CSS-sel és JavaScript nélkül készültek.
Ról ről
A Bootstrap „pörgetői” a projektek betöltési állapotának megjelenítésére használhatók. Csak HTML és CSS használatával készültek, ami azt jelenti, hogy nincs szükség JavaScriptre a létrehozásukhoz. A láthatóságuk váltásához azonban szüksége lesz néhány egyéni JavaScriptre. Megjelenésük, igazításuk és méretük egyszerűen testreszabható csodálatos használati osztályainkkal.
A kisegítő lehetőségek érdekében itt minden betöltő tartalmaz role="status"egy beágyazott <span class="sr-only">Loading...</span>.
Border spinner
Használja a szegélypörgőket egy könnyű töltésjelzőhöz.
Betöltés...
Színek
A szegélyforgató ezt használja currentColor, border-colorami azt jelenti, hogy testreszabhatja a színt a szövegszín segédprogramokkal . Bármelyik szövegszín segédprogramunkat használhatja a szabványos pörgetőn.
Betöltés...
Betöltés...
Betöltés...
Betöltés...
Betöltés...
Betöltés...
Betöltés...
Betöltés...
Miért nem használ border-colorsegédprogramokat? Minden szegélyforgató meghatároz egy transparentszegélyt legalább az egyik oldalhoz, így a .border-{color}segédprogramok ezt felülírják.
Növekvő fonó
Ha nem szereti a szegélytárcsát, váltson a növesztő fonóra. Bár technikailag nem forog, többször is nő!
Betöltés...
Ez a pörgettyű ismét a -val készült , így a szövegszín segédprogramokkalcurrentColor egyszerűen megváltoztathatja a megjelenését . Itt kék színben, a támogatott változatokkal együtt.
Betöltés...
Betöltés...
Betöltés...
Betöltés...
Betöltés...
Betöltés...
Betöltés...
Betöltés...
Igazítás
A Bootstrap spinnerei rems, currentColor, és display: inline-flex. Ez azt jelenti, hogy könnyen átméretezhetők, átszínezhetők és gyorsan igazíthatók.
Árrés
Használjon margó-segédprogramokat , mint például .m-5az egyszerű térközelítés érdekében.
Adjon hozzá .spinner-border-smés .spinner-grow-smkészítsen egy kisebb fonót, amely gyorsan használható más alkatrészekben.
Betöltés...
Betöltés...
Vagy használjon egyéni CSS-t vagy belső stílusokat a méretek szükség szerinti módosításához.
Betöltés...
Betöltés...
Gombok
A gombokon belüli pörgettyűkkel jelezheti, hogy egy művelet folyamatban van vagy folyamatban van. A szöveget ki is cserélheti a pörgető elemből, és szükség szerint használhatja a gombszöveget.