Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
in English

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>.

Šio komponento animacijos efektas priklauso nuo prefers-reduced-motionmedijos užklausos. Žr . mūsų pritaikymo neįgaliesiems dokumentacijos skyrių „Sumažintas judėjimas“ .

Pasieninis suktukas

Lengvam pakrovimo indikatoriui naudokite kraštinių suktukus.

Įkeliama...
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Spalvos

Kraštelių suktukas naudoja currentColorsavo 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ų.

Įkeliama...
Įkeliama...
Įkeliama...
Įkeliama...
Įkeliama...
Įkeliama...
Įkeliama...
Įkeliama...
<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>
Kodėl nepasinaudojus border-colorkomunalinėmis paslaugomis? Kiekvienas kraštinių suktukas nurodo transparentkraš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!

Įkeliama...
<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.

Įkeliama...
Įkeliama...
Įkeliama...
Įkeliama...
Įkeliama...
Įkeliama...
Įkeliama...
Įkeliama...
<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 rems, 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-5būtų lengviau nustatyti tarpus.

Įkeliama...
<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

Įkeliama...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
Įkeliama...
<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

Įkeliama...
<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Teksto lygiavimas

Įkeliama...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Dydis

Pridėkite .spinner-border-smir .spinner-grow-smsukurkite mažesnį suktuką, kurį būtų galima greitai panaudoti kituose komponentuose.

Įkeliama...
Įkeliama...
<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.

Įkeliama...
Įkeliama...
<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;
  }
}