Spinners
Endike eta loading yon eleman oswa yon paj ak Bootstrap spinners, ki te konstwi antyèman ak HTML, CSS, epi pa gen JavaScript.
Konsènan
Bootstrap "spinners" ka itilize pou montre eta a chaje nan pwojè ou yo. Yo bati sèlman ak HTML ak CSS, sa vle di ou pa bezwen okenn JavaScript pou kreye yo. Sepandan, w ap bezwen kèk JavaScript koutim pou chanje vizibilite yo. Aparans yo, aliyman, ak gwosè yo ka fasilman Customized ak klas itilite etonan nou yo.
Pou rezon aksesibilite, chak loader isit la gen ladann role="status"
ak yon imbrike <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
rechèch medya yo. Gade
seksyon mouvman redui nan dokiman aksè nou an .
Border spinner
Sèvi ak spinners fwontyè yo pou yon endikatè loading ki lejè.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Koulè
Spinner fwontyè a itilize currentColor
pou li border-color
, sa vle di ou ka Customize koulè a ak sèvis piblik koulè tèks . Ou ka itilize nenpòt nan sèvis piblik koulè tèks nou yo sou spinner estanda a.
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
border-color
sèvis piblik? Chak spinner fwontyè presize yon
transparent
fwontyè pou omwen yon bò, kidonk
.border-{color}
sèvis piblik yo ta pase sou sa.
Ap grandi spinner
Si ou pa anpenpan yon spinner fwontyè, chanje nan spinner grandi. Pandan ke li pa teknikman vire, li repete grandi!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Yon fwa ankò, spinner sa a bati ak currentColor
, kidonk ou ka fasilman chanje aparans li ak sèvis piblik koulè tèks . Isit la li se an ble, ansanm ak varyant yo sipòte.
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Aliyman
Spinners nan Bootstrap yo bati ak rem
s, currentColor
, ak display: inline-flex
. Sa vle di yo ka fasilman redimensionné, chanje koulè, epi byen vit aliyen.
Marge
Sèvi ak sèvis piblik Marge tankou .m-5
pou espas fasil.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Plasman
Sèvi ak sèvis piblik flexbox , sèvis piblik flote , oswa sèvis piblik aliyman tèks pou mete spinners egzakteman kote ou bezwen yo nan nenpòt sitiyasyon.
Flex
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
Flote
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Tèks aliman
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Gwosè
Ajoute .spinner-border-sm
ak .spinner-grow-sm
fè yon spinner ki pi piti ki ka byen vit itilize nan lòt konpozan.
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Oswa, sèvi ak CSS koutim oswa estil inline pou chanje dimansyon yo jan sa nesesè.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Bouton
Sèvi ak spinners nan bouton pou endike yon aksyon aktyèlman ap trete oswa k ap fèt. Ou ka tou chanje tèks la soti nan eleman spinner la epi itilize tèks bouton jan sa nesesè.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">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="visually-hidden">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>
Sass
Varyab
$spinner-width: 2rem;
$spinner-height: $spinner-width;
$spinner-vertical-align: -.125em;
$spinner-border-width: .25em;
$spinner-animation-speed: .75s;
$spinner-width-sm: 1rem;
$spinner-height-sm: $spinner-width-sm;
$spinner-border-width-sm: .2em;
Keyframes
Itilize pou kreye animasyon CSS pou spinners nou yo. Enkli nan scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}