Vrtavke

Označite stanje nalaganja komponente ali strani z vrtljivkami Bootstrap, ki so v celoti zgrajene s HTML, CSS in brez JavaScripta.

Na tej strani

O tem

Za prikaz stanja nalaganja v vaših projektih se lahko uporabijo »vrteče« Bootstrap. Zgrajeni so samo s HTML in CSS, kar pomeni, da za njihovo ustvarjanje ne potrebujete JavaScripta. Za preklop njihove vidnosti pa boste potrebovali nekaj JavaScripta po meri. Njihov videz, poravnavo in velikost je mogoče enostavno prilagoditi z našimi neverjetnimi razredi uporabnosti.

Za namene dostopnosti vsak nalagalnik tukaj vključuje role="status"in ugnezdeni <span class="visually-hidden">Loading...</span>.

Učinek animacije te komponente je odvisen od prefers-reduced-motionmedijske poizvedbe. Oglejte si razdelek o zmanjšanem gibanju v naši dokumentaciji o dostopnosti .

Obrobni vrtavec

Uporabite obrobne vrtavke za indikator lahkega nakladanja.

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

Barve

Obrobni vrtavec uporablja currentColorza svoje border-color, kar pomeni, da lahko prilagodite barvo s pripomočki za barvo besedila . Uporabite lahko katerega koli od naših pripomočkov za barvo besedila na standardnem vrtavki.

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

Zakaj ne bi uporabljali border-colorpripomočkov? Vsak mejni vrtalnik določa transparentobrobo za vsaj eno stran, zato .border-{color}bi pripomočki to preglasili.

Rastoča vrtavka

Če ne marate mejne vrtavke, preklopite na vrtavko za rast. Čeprav se tehnično ne vrti, vedno znova raste!

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

Še enkrat, ta vrtavka je zgrajena z currentColor, tako da lahko preprosto spremenite njegov videz s pripomočki za barvo besedila . Tukaj je v modri barvi, skupaj s podprtimi različicami.

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

Poravnava

Spinerji v Bootstrapu so zgrajeni s rems currentColor, in display: inline-flex. To pomeni, da jim je mogoče preprosto spremeniti velikost, prebarvati in hitro poravnati.

Marža

Uporabite pripomočke za robove, na primer .m-5za enostavno razmik.

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

Umestitev

Uporabite pripomočke flexbox , lebdeče pripomočke ali pripomočke za poravnavo besedila , da vrtavke postavite točno tam, kjer jih potrebujete v vsaki situaciji.

Flex

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

Nalaganje...

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

Plovci

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

Poravnaj besedilo

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

Velikost

Dodajte .spinner-border-smin .spinner-grow-smnaredite manjši spiner, ki ga lahko hitro uporabite v drugih komponentah.

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

Ali pa uporabite CSS po meri ali vgrajene sloge, da po potrebi spremenite dimenzije.

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

Gumbi

Uporabite vrtljivke znotraj gumbov, da označite, da se dejanje trenutno izvaja ali poteka. Prav tako lahko zamenjate besedilo iz vrtljivega elementa in po potrebi uporabite besedilo gumba.

<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

Spremenljivke

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

Ključni okvirji

Uporablja se za ustvarjanje animacij CSS za naše vrtavke. Vključeno v scss/_spinners.scss.

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

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