Spinneriai
Nurodykite komponento arba puslapio įkėlimo būseną naudodami „Bootstrap“ suktukus, sukurtus tik naudojant HTML, CSS ir be „JavaScript“.
Apie
„Bootstrap“ „suktukai“ gali būti naudojami norint parodyti jūsų projektų įkėlimo būseną. Jie sukurti tik naudojant HTML ir CSS, o tai reiškia, kad jiems sukurti nereikia jokio JavaScript. Tačiau jums reikės tam tikro tinkinto „JavaScript“, kad perjungtumėte jų matomumą. Jų išvaizdą, išlyginimą ir dydį galima lengvai pritaikyti pagal mūsų nuostabias naudingumo klases.
Prieinamumo sumetimais kiekvienas čia esantis įkroviklis apima role="status"
ir įdėtą <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
medijos užklausos. Žr
. mūsų pritaikymo neįgaliesiems dokumentacijos skyrių „Sumažintas judėjimas“ .
Pasieninis suktukas
Lengvam pakrovimo indikatoriui naudokite kraštinių suktukus.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Spalvos
Kraštelių suktukas naudoja currentColor
savo border-color
, tai reiškia, kad galite tinkinti spalvą naudodami teksto spalvų priemones . Standartiniame suktuko galite naudoti bet kurią iš mūsų teksto spalvų paslaugų.
<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
komunalinėmis paslaugomis? Kiekvienas kraštinių suktukas nurodo
transparent
kraštinę bent vienai pusei, todėl
.border-{color}
komunalinės paslaugos tai nepaisytų.
Augantis suktukas
Jei nemėgstate kraštinių suktuko, perjunkite į auginimo suktuką. Nors jis techniškai nesisuka, jis nuolat auga!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Vėlgi, šis suktukas sukurtas naudojant currentColor
, todėl galite lengvai pakeisti jo išvaizdą naudodami teksto spalvų programas . Čia jis yra mėlynos spalvos, kartu su palaikomais variantais.
<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>
Lygiavimas
„Bootstrap“ suktukai sukurti naudojant rem
s, currentColor
, ir display: inline-flex
. Tai reiškia, kad jų dydį galima lengvai pakeisti, pakeisti spalvą ir greitai sulygiuoti.
Marža
Naudokite maržos įrankius , pvz ., kad .m-5
būtų lengviau nustatyti tarpus.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Įdėjimas
Naudokite „flexbox“ programas , plūduriuojančias priemones arba teksto lygiavimo priemones, kad suktukus bet kurioje situacijoje patalpintumėte tiksliai ten, kur jums jų reikia.
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>
Plūdės
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Teksto lygiavimas
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Dydis
Pridėkite .spinner-border-sm
ir .spinner-grow-sm
sukurkite mažesnį suktuką, kurį būtų galima greitai panaudoti kituose komponentuose.
<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>
Arba naudokite tinkintus CSS arba eilutinius stilius, kad prireikus pakeistumėte matmenis.
<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>
Mygtukai
Naudokite mygtukų suktukus, kad nurodytumėte, koks veiksmas šiuo metu apdorojamas arba vyksta. Taip pat galite pakeisti tekstą iš suktuko elemento ir, jei reikia, naudoti mygtuko tekstą.
<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
Kintamieji
$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;
Pagrindiniai kadrai
Naudojama kuriant CSS animacijas mūsų suktiniams. Įtraukta į scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}