Spinner
Gitt de Luedezoustand vun enger Komponent oder Säit mat Bootstrap Spinner un, ganz gebaut mat HTML, CSS a kee JavaScript.
Iwwer
Bootstrap "Spinner" kënne benotzt ginn fir de Luedezoustand an Äre Projeten ze weisen. Si sinn nëmme mat HTML an CSS gebaut, dat heescht datt Dir kee JavaScript braucht fir se ze kreéieren. Dir braucht awer e puer personaliséiert JavaScript fir hir Visibilitéit ze wiesselen. Hir Erscheinung, Ausrichtung an Gréisst kënne ganz einfach mat eisen erstaunlechen Utilityklassen personaliséiert ginn.
Fir Accessibilitéitszwecker enthält all Loader hei role="status"
an eng nestéiert <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
Medienufro of. Kuckt d'
Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .
Grenz Spinner
Benotzt d'Grenzspinner fir e liichte Luedeindikator.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Faarwen
De Grenzspinner benotzt currentColor
fir seng border-color
, dat heescht datt Dir d'Faarf mat Textfaarf Utilities personaliséiere kënnt . Dir kënnt all vun eisen Textfaarf Utilities op der Standard Spinner benotzen.
<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
Utilities benotzen? All Grenzspinner spezifizéiert eng
transparent
Grenz fir op d'mannst eng Säit, sou datt
.border-{color}
Utilities dat iwwerschreiden.
Wuesse Spinner
Wann Dir keng Grenzspinner Loscht hutt, schalt op de Grow Spinner. Och wann et net technesch dréit, wiisst et ëmmer erëm!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Nach eng Kéier ass dëse Spinner mat gebaut currentColor
, sou datt Dir einfach säin Erscheinungsbild mat Textfaarf Utilities änneren kënnt . Hei ass et a blo, zesumme mat den ënnerstëtzten Varianten.
<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>
Ausriichtung
Spinner am Bootstrap gi mat rem
s gebaut, currentColor
, an display: inline-flex
. Dëst bedeit datt se einfach änneren, nei faarweg a séier ausgeriicht kënne ginn.
Marge
Benotzt Margin Utilities wéi .m-5
fir einfach Abstand.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Placement
Benotzt Flexbox Utilities , Float Utilities , oder Text Ausrichtung Utilities fir Spinner genau ze placéieren wou Dir se an all Situatioun braucht.
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>
Schwëmmt
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Text ausriichten
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Gréisst
Füügt .spinner-border-sm
a .spinner-grow-sm
fir e méi klenge Spinner ze maachen dee séier an anere Komponenten benotzt ka ginn.
<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>
Oder benotzt personaliséiert CSS oder Inline Stiler fir d'Dimensioune wéi néideg z'änneren.
<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>
Knäppercher
Benotzt Spinner bannent Knäppercher fir unzeginn datt eng Handlung am Moment veraarbecht oder stattfënnt. Dir kënnt och den Text aus dem Spinner-Element austauschen a Knäppchen Text benotzen wéi néideg.
<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>