Označte stav načítania komponentu alebo stránky pomocou číselníkov Bootstrap, vytvorených výlučne pomocou HTML, CSS a bez JavaScriptu.
O
Bootstrap „spinnery“ možno použiť na zobrazenie stavu načítania vo vašich projektoch. Sú vytvorené iba pomocou HTML a CSS, čo znamená, že na ich vytvorenie nepotrebujete žiadny JavaScript. Na prepnutie ich viditeľnosti však budete potrebovať nejaký vlastný JavaScript. Ich vzhľad, zarovnanie a veľkosť možno ľahko prispôsobiť pomocou našich úžasných tried úžitkových vlastností.
Na účely zjednodušenia ovládania tu každý načítač obsahuje role="status"a vnorený súbor <span class="sr-only">Loading...</span>.
Hraničný spinner
Použite hraničné kolíky pre ľahký indikátor zaťaženia.
Načítava...
Farby
Ohraničenie sa používa currentColorna to border-color, čo znamená, že si môžete prispôsobiť farbu pomocou nástrojov na farbu textu . Na štandardnom spinneri môžete použiť ktorýkoľvek z našich nástrojov pre farbu textu.
Načítava...
Načítava...
Načítava...
Načítava...
Načítava...
Načítava...
Načítava...
Načítava...
Prečo nepoužívať border-colornástroje? Každý číselník okrajov špecifikuje transparentokraj aspoň pre jednu stranu, takže .border-{color}pomocné programy to prepíšu.
Rastúca rotačka
Ak nemáte chuť na hraničnú rotačku, prepnite na rastúcu rotačku. Hoci sa technicky netočí, opakovane rastie!
Načítava...
Tento spinner je opäť zostavený s currentColor, takže jeho vzhľad môžete jednoducho zmeniť pomocou nástrojov pre farbu textu . Tu je v modrej farbe spolu s podporovanými variantmi.
Načítava...
Načítava...
Načítava...
Načítava...
Načítava...
Načítava...
Načítava...
Načítava...
Zarovnanie
Spinnery v Bootstrape sú vytvorené pomocou rems, currentColor, a display: inline-flex. To znamená, že sa dajú ľahko zmeniť veľkosť, prefarbiť a rýchlo zarovnať.
Marža
Použite nástroje okrajov , napríklad .m-5na jednoduché vytváranie medzier.
Pridajte .spinner-border-sma .spinner-grow-smvytvorte menší spinner, ktorý možno rýchlo použiť v rámci iných komponentov.
Načítava...
Načítava...
Alebo použite vlastné štýly CSS alebo vložené štýly na zmenu rozmerov podľa potreby.
Načítava...
Načítava...
Tlačidlá
Pomocou číselníkov v rámci tlačidiel označte, že sa práve spracováva alebo vykonáva akcia. Môžete tiež vymeniť text z prvku spinner a použiť text tlačidla podľa potreby.