Spinneri
Norādiet komponenta vai lapas ielādes stāvokli, izmantojot Bootstrap vērpējus, kas pilnībā izveidoti, izmantojot HTML, CSS un bez JavaScript.
Par
Bootstrap “spinnerus” var izmantot, lai jūsu projektos parādītu ielādes stāvokli. Tie ir veidoti tikai ar HTML un CSS, kas nozīmē, ka to izveidei nav nepieciešams JavaScript. Tomēr jums būs nepieciešams pielāgots JavaScript, lai pārslēgtu to redzamību. To izskatu, izlīdzināšanu un izmērus var viegli pielāgot, izmantojot mūsu pārsteidzošās lietderības klases.
Pieejamības nolūkos katrs ielādētājs šeit ietver role="status"
un ligzdotu <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
multivides vaicājuma. Skatiet
mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .
Robežvērpējs
Izmantojiet apmales griezējus, lai iegūtu vieglu iekraušanas indikatoru.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Krāsas
Apmales vērpējs izmanto currentColor
to border-color
, kas nozīmē, ka varat pielāgot krāsu, izmantojot teksta krāsu utilītas . Varat izmantot jebkuru no mūsu teksta krāsu utilītprogrammām uz standarta vērpēja.
<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
komunālos pakalpojumus? Katrs apmales griezējs norāda
transparent
apmali vismaz vienai pusei, tāpēc
.border-{color}
utilītas to ignorēs.
Augošs vērpējs
Ja jums nepatīk apmales vērpējs, pārslēdzieties uz augšanas vērpēju. Lai gan tas tehniski negriežas, tas atkārtoti aug!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Atkal šis vērpējs ir veidots ar currentColor
, tāpēc jūs varat viegli mainīt tā izskatu, izmantojot teksta krāsu utilītas . Šeit tas ir zilā krāsā kopā ar atbalstītajiem variantiem.
<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>
Izlīdzināšana
Bootstrap vērpēji ir veidoti ar rem
s, currentColor
, un display: inline-flex
. Tas nozīmē, ka to izmērus var viegli mainīt, pārkrāsot un ātri izlīdzināt.
Marža
Izmantojiet piemales utilītas , piemēram .m-5
, lai atvieglotu atstarpi.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Izvietojums
Izmantojiet flexbox utilītas , peldošās utilītprogrammas vai teksta līdzināšanas utilītas, lai jebkurā situācijā novietotu spinnerus tieši tur, kur tie ir nepieciešami.
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>
Pludiņi
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Teksta līdzināšana
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Izmērs
Pievienojiet .spinner-border-sm
un .spinner-grow-sm
izveidojiet mazāku vērptuvi, ko var ātri izmantot citos komponentos.
<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>
Vai arī izmantojiet pielāgotus CSS vai iekļautos stilus, lai pēc vajadzības mainītu izmērus.
<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>
Pogas
Izmantojiet pogās esošos griežņus, lai norādītu, kāda darbība pašlaik tiek apstrādāta vai notiek. Varat arī apmainīt tekstu no rotējošā elementa un pēc vajadzības izmantot pogas tekstu.
<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
Mainīgie lielumi
$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;
Atslēgkadri
Izmanto, lai izveidotu CSS animācijas mūsu vērpējiem. Iekļauts scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}