Spinners
Jou de laadstatus fan in komponint of side oan mei Bootstrap-spinners, folslein boud mei HTML, CSS, en gjin JavaScript.
Oer
Bootstrap "spinners" kinne brûkt wurde om de laden steat yn jo projekten sjen te litten. Se binne allinich boud mei HTML en CSS, wat betsjuttet dat jo gjin JavaScript hawwe om se te meitsjen. Jo sille lykwols wat oanpast JavaScript nedich wêze om har sichtberens te wikseljen. Har uterlik, ôfstimming en grutte kinne maklik wurde oanpast mei ús geweldige nutklassen.
Foar tagonklikensdoelen omfettet elke loader hjir role="status"
en in nestele <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
mediafraach. Sjoch de
seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .
Border spinner
Brûk de grins spinners foar in lichtgewicht laden yndikator.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Kleuren
De rânespinner brûkt currentColor
foar har border-color
, wat betsjuttet dat jo de kleur kinne oanpasse mei tekstkleurhelpprogramma's . Jo kinne elk fan ús tekstkleur-hulpprogramma's brûke op 'e standert spinner.
<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
nutsbedriuwen? Elke grinsspinner spesifisearret in
transparent
grins foar op syn minst ien kant, sadat
.border-{color}
nutsbedriuwen dat oerskriuwe.
Groeiende spinner
As jo gjin grinsspinner hawwe, wikselje dan oer nei de groeispinner. Hoewol it technysk net draait, groeit it hieltyd wer!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Noch ien kear is dizze spinner boud mei currentColor
, sadat jo it uterlik maklik kinne feroarje mei tekstkleurhelpprogramma's . Hjir is it yn blau, tegearre mei de stipe farianten.
<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>
Alignment
Spinners yn Bootstrap binne boud mei rem
s, currentColor
, en display: inline-flex
. Dit betsjut dat se maklik kinne wurde feroare, opnij kleure en fluch ôfstimd.
Marge
Brûk marzje-hulpprogramma's lykas .m-5
foar maklike ôfstân.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Pleatsing
Brûk flexbox-helpprogramma's , float -helpprogramma's , of tekstôfstimmingshelpprogramma 's om spinners krekt te pleatsen wêr't jo se yn elke situaasje nedich binne.
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>
Floats
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Tekst align
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Grutte
Foegje .spinner-border-sm
en .spinner-grow-sm
meitsje in lytsere spinner dy't fluch kin wurde brûkt binnen oare komponinten.
<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>
Of brûk oanpaste CSS- of ynline-stilen om de dimensjes te feroarjen as nedich.
<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>
Knoppen
Brûk spinners binnen knoppen om oan te jaan dat in aksje op it stuit wurdt ferwurke of plakfynt. Jo kinne de tekst ek wikselje út it spinner-elemint en brûk knoptekst as nedich.
<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
Fariabelen
$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
Wurdt brûkt foar it meitsjen fan de CSS-animaasjes foar ús spinners. Opnaam yn scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}