Spinneriai

Nurodykite komponento arba puslapio įkėlimo būseną naudodami „Bootstrap“ suktukus, sukurtus tik naudojant HTML, CSS ir be „JavaScript“.

Šiame puslapyje

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.

html

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

html

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

html

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

html

<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 paraštės komunalines priemones , pvz ., kad .m-5būtų lengviau nustatyti tarpus.

html

<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

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Įkeliama...

html

<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

html

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

Teksto lygiavimas

html

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

html

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

html

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

html

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

html

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

CSS

Kintamieji

Pridėta 5.2.0 versijoje

Kaip „Bootstrap“ besivystančio CSS kintamųjų metodo dalis, „Spinners“ dabar naudoja vietinius CSS kintamuosius, .spinner-borderkad .spinner-growpagerintų tinkinimą realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

Kraštinių suktuko kintamieji:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

Augantys suktuko kintamieji:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

Abiejų suktukų atveju naudojamos mažos suktuko modifikatorių klasės, kad prireikus būtų atnaujintos šių CSS kintamųjų reikšmės. Pavyzdžiui, .spinner-border-smklasė atlieka šiuos veiksmus:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

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;
  }
}