Přadleny
Označte stav načítání komponenty nebo stránky pomocí číselníků Bootstrap, vytvořených výhradně pomocí HTML, CSS a bez JavaScriptu.
O
Bootstrap „spinnery“ lze použít k zobrazení stavu načítání ve vašich projektech. Jsou vytvořeny pouze pomocí HTML a CSS, což znamená, že k jejich vytvoření nepotřebujete žádný JavaScript. K přepínání jejich viditelnosti však budete potřebovat nějaký vlastní JavaScript. Jejich vzhled, zarovnání a velikost lze snadno přizpůsobit pomocí našich úžasných tříd užitných vlastností.
Pro účely usnadnění každý zavaděč zde obsahuje role="status"
a vnořený soubor <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
dotazu na média. Podívejte se na
část s omezeným pohybem v naší dokumentaci přístupnosti .
Hraniční spinner
Použijte hraniční kolíky pro lehký indikátor zatížení.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Barvy
Hraniční číselník používá currentColor
pro své border-color
, což znamená , že můžete přizpůsobit barvu pomocí nástrojů pro barvu textu . Na standardním číselníku můžete použít kterýkoli z našich nástrojů pro barvu textu.
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
border-color
nepoužít utility? Každý číselník ohraničení určuje
transparent
ohraničení alespoň pro jednu stranu, takže
.border-{color}
nástroje by to přepsaly.
Rostoucí přadlena
Pokud nemáte chuť na hraniční odstředivku, přejděte na pěstební odstředivku. I když se technicky neotáčí, opakovaně roste!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Tento spinner je opět sestaven s currentColor
, takže jeho vzhled můžete snadno změnit pomocí nástrojů pro barvu textu . Zde je v modré barvě spolu s podporovanými variantami.
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
Zarovnání
Spinnery v Bootstrapu jsou vytvořeny pomocí rem
s, currentColor
, a display: inline-flex
. To znamená, že lze snadno změnit jejich velikost, přebarvit a rychle zarovnat.
Okraj
Používejte nástroje pro okraje , například .m-5
pro snadné vytváření mezer.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Umístění
Použijte nástroje flexbox , plovoucí nástroje nebo nástroje pro zarovnání textu k umístění spinnerů přesně tam, kde je potřebujete v jakékoli situaci.
Flex
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
Plováky
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Zarovnání textu
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Velikost
Přidáním .spinner-border-sm
a .spinner-grow-sm
vytvoříte menší odstředivku, kterou lze rychle použít s jinými součástmi.
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
Nebo použijte vlastní CSS nebo vložené styly a změňte rozměry podle potřeby.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
Tlačítka
Pomocí číselníků uvnitř tlačítek označte, že se právě zpracovává nebo odehrává akce. Můžete také vyměnit text z prvku číselníku a použít text tlačítka podle potřeby.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">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="sr-only">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>