in English

Spinners

Dui die laaitoestand van 'n komponent of bladsy aan met Bootstrap-draaiers, heeltemal gebou met HTML, CSS en geen JavaScript nie.

Op hierdie bladsy

Oor

Bootstrap "spinners" kan gebruik word om die laai toestand in jou projekte te wys. Hulle is slegs gebou met HTML en CSS, wat beteken dat jy geen JavaScript nodig het om dit te skep nie. Jy sal egter pasgemaakte JavaScript nodig hê om hul sigbaarheid te wissel. Hul voorkoms, belyning en grootte kan maklik aangepas word met ons wonderlike nutsklasse.

Vir toeganklikheidsdoeleindes bevat elke laaier hier ' role="status"n geneste <span class="visually-hidden">Loading...</span>.

Die animasie-effek van hierdie komponent is afhanklik van die prefers-reduced-motionmedianavraag. Sien die verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .

Border spinner

Gebruik die randspinners vir 'n liggewig laai-aanwyser.

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

Kleure

Die grensdraaier gebruik currentColorvir sy border-color, wat beteken dat jy die kleur kan pasmaak met tekskleurhulpmiddels . Jy kan enige van ons tekskleurhulpmiddels op die standaard draaier gebruik.

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

Hoekom nie border-colornutsprogramme gebruik nie? Elke grensdraaier spesifiseer 'n transparentgrens vir ten minste een kant, so .border-{color}nutsprogramme sal dit ignoreer.

Groeiende spinner

As jy nie lus is vir 'n border spinner nie, skakel oor na die grow spinner. Alhoewel dit nie tegnies draai nie, groei dit herhaaldelik!

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

Weereens, hierdie draaier is gebou met currentColor, sodat jy maklik sy voorkoms kan verander met tekskleurhulpmiddels . Hier is dit in blou, saam met die ondersteunde variante.

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

Belyning

Spinners in Bootstrap is gebou met rems, currentColor, en display: inline-flex. Dit beteken hulle kan maklik verander, herkleur en vinnig in lyn gebring word.

Marge

Gebruik marge-hulpmiddels soos .m-5vir maklike spasiëring.

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

Plasing

Gebruik flexbox-nutsprogramme , float -hulpmiddels of teksbelyningshulpmiddels om draaiers te plaas presies waar jy dit in enige situasie nodig het.

Buig

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

Laai tans...

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

Vlotte

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

Teksbelyning

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

Grootte

Voeg by .spinner-border-smen .spinner-grow-smmaak 'n kleiner spinner wat vinnig binne ander komponente gebruik kan word.

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

Of gebruik pasgemaakte CSS- of inlynstyle om die afmetings te verander soos nodig.

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

Knoppies

Gebruik draaiers binne knoppies om aan te dui dat 'n handeling tans verwerk word of plaasvind. Jy kan ook die teks uit die draaier-element ruil en knoppieteks gebruik soos nodig.

<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

Veranderlikes

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

Sleutelrame

Word gebruik om die CSS-animasies vir ons draaiers te skep. Ingesluit in scss/_spinners.scss.

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

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