Spiners
Tregoni gjendjen e ngarkimit të një komponenti ose faqeje me spinners Bootstrap, të ndërtuar tërësisht me HTML, CSS dhe pa JavaScript.
Rreth
"Spinners" Bootstrap mund të përdoren për të treguar gjendjen e ngarkimit në projektet tuaja. Ato janë ndërtuar vetëm me HTML dhe CSS, që do të thotë se nuk keni nevojë për ndonjë JavaScript për t'i krijuar ato. Sidoqoftë, do t'ju duhet disa JavaScript me porosi për të ndryshuar dukshmërinë e tyre. Pamja, shtrirja dhe madhësia e tyre mund të personalizohen lehtësisht me klasat tona të mrekullueshme të shërbimeve.
Për qëllime të aksesueshmërisë, çdo ngarkues këtu përfshin role="status"
dhe një të mbivendosur <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
pyetja e medias. Shikoni
seksionin e lëvizjes së reduktuar të dokumentacionit tonë të aksesueshmërisë .
rrotullues kufiri
Përdorni rrotulluesit kufitar për një tregues ngarkimi të lehtë.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Ngjyrat
Rrotulluesi i kufirit përdor currentColor
për të border-color
, që do të thotë se mund ta personalizoni ngjyrën me mjetet ndihmëse të ngjyrave të tekstit . Ju mund të përdorni cilindo nga mjetet tona të ngjyrave të tekstit në rrotulluesin standard.
<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
shërbimet komunale? Çdo rrotullues kufiri specifikon një
transparent
kufi për të paktën njërën anë, kështu që
.border-{color}
shërbimet komunale do ta anashkalonin atë.
Spiner në rritje
Nëse nuk ju pëlqen një rrotullues kufiri, kaloni në rrotulluesin e rritjes. Ndërsa teknikisht nuk rrotullohet, ai rritet vazhdimisht!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Edhe një herë, ky rrotullues është ndërtuar me currentColor
, kështu që ju mund ta ndryshoni me lehtësi pamjen e tij me mjetet ndihmëse të ngjyrave të tekstit . Këtu është në ngjyrë blu, së bashku me variantet e mbështetura.
<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>
Radhitje
Spinnerët në Bootstrap janë ndërtuar me rem
s, currentColor
, dhe display: inline-flex
. Kjo do të thotë se ato mund të ndryshohen lehtësisht, të ringjyrohen dhe të rreshtohen shpejt.
Marzhi
Përdorni mjetet e marzhit si .m-5
për ndarje të lehtë.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Vendosja
Përdorni programet ndihmëse flexbox , shërbimet float ose programet e shtrirjes së tekstit për të vendosur rrotulluesit pikërisht aty ku ju nevojiten në çdo situatë.
Përkul
<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>
Noton
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Përafrimi i tekstit
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Madhësia
Shtoni .spinner-border-sm
dhe .spinner-grow-sm
për të bërë një rrotullues më të vogël që mund të përdoret shpejt brenda komponentëve të tjerë.
<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>
Ose, përdorni stile të personalizuara CSS ose inline për të ndryshuar dimensionet sipas nevojës.
<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>
Butonat
Përdorni rrotulluesit brenda butonave për të treguar se një veprim po përpunohet ose po ndodh aktualisht. Ju gjithashtu mund të ndërroni tekstin nga elementi rrotullues dhe të përdorni tekstin e butonit sipas nevojës.
<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
Variablat
$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;
Kornizat kryesore
Përdoret për krijimin e animacioneve CSS për spinnerët tanë. Të përfshira në scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}