Spinnerid

Näidake komponendi või lehe laadimisolekut Bootstrapi keerurite abil, mis on ehitatud täielikult HTML-i, CSS-i ja ilma JavaScriptita.

Sellel lehel

Umbes

Bootstrapi "spinnereid" saab kasutada teie projektide laadimisoleku kuvamiseks. Need on loodud ainult HTML-i ja CSS-iga, mis tähendab, et nende loomiseks pole vaja JavaScripti. Nende nähtavuse sisselülitamiseks vajate siiski kohandatud JavaScripti. Nende välimust, joondamist ja suurust saab meie suurepäraste utiliitide abil hõlpsasti kohandada.

Juurdepääsetavuse huvides sisaldab iga laadur role="status"ja pesastatud <span class="visually-hidden">Loading...</span>.

Selle komponendi animatsiooniefekt sõltub prefers-reduced-motionmeediumipäringust. Vaadake meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .

Ääriste ketraja

Kerge laadimisnäidiku jaoks kasutage äärekeerutajaid.

html

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

Värvid

Ääriste keerutaja kasutab currentColorselle jaoks border-color, mis tähendab, et saate kohandada värvi tekstivärvi utiliitidega . Standardsel spinneril saate kasutada mis tahes meie tekstivärvi utiliiti.

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>

Miks mitte kasutada border-colorkommunaalteenuseid? Iga piirikeerutaja määrab transparentäärise vähemalt ühele küljele, nii et .border-{color}utiliidid alistaksid selle.

Kasvav spinner

Kui te ei armasta äärisvurrit, lülituge kasvuketrale. Kuigi see tehniliselt ei pöörle, kasvab see korduvalt!

html

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

Jällegi on see spinner koostatud rakendusega currentColor, nii et saate selle välimust tekstivärvi utiliitidega hõlpsalt muuta . Siin on see sinine koos toetatud variantidega.

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>

Joondamine

Bootstrapi spinnerid on üles ehitatud rems, currentColor, ja display: inline-flex. See tähendab, et nende suurust saab hõlpsasti muuta, värvida ja kiiresti joondada.

Marginaal

Kasutage veerise utiliite nagu .m-5lihtsaks vahekauguseks.

html

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

Paigutus

Kasutage flexboxi utiliite , ujuki utiliite või teksti joondusutiliite, et paigutada spinnerid igas olukorras täpselt sinna, kus neid vajate.

Flex

html

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

Laadimine...

html

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Ujukid

html

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

Teksti joondamine

html

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

Suurus

Lisage .spinner-border-smja .spinner-grow-smtehke väiksem spinner, mida saab kiiresti teiste komponentide sees kasutada.

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>

Või kasutage kohandatud CSS-i või tekstisiseseid stiile, et vajadusel mõõtmeid muuta.

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>

Nupud

Kasutage nuppude sees olevaid pöörlejaid, et näidata, et toiming on hetkel töötlemisel või toimumisel. Samuti võite teksti ketruselemendist välja vahetada ja vajadusel nuputeksti kasutada.

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

Muutujad

Lisatud versioonisse v5.2.0

Bootstrapi areneva CSS-muutujate lähenemisviisi osana kasutavad spinnerid nüüd kohalikke CSS-i muutujaid, .spinner-borderet .spinner-growneid reaalajas kohandada. CSS-i muutujate väärtused määratakse Sassi kaudu, seega toetatakse endiselt ka Sassi kohandamist.

Äärise keerutaja muutujad:

  --#{$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;

Kasvavad spinneri muutujad:

  --#{$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;

Mõlema spinneri puhul kasutatakse nende CSS-i muutujate väärtuste värskendamiseks vastavalt vajadusele väikeseid spinneri modifikaatoriklasse. Näiteks .spinner-border-smklass teeb järgmist:

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

Sassi muutujad

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

Võtmekaadrid

Kasutatakse meie spinneritele CSS-animatsioonide loomiseks. Sisaldub scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}