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

html

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

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>

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!

html

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

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>

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.

html

<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

html

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

Laai tans...

html

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

Vlotte

html

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

Teksbelyning

html

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

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>

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

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>

Knoppies

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

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

Veranderlikes

Bygevoeg in v5.2.0

As deel van Bootstrap se ontwikkelende CSS-veranderlikebenadering, gebruik draaiers nou plaaslike CSS-veranderlikes op .spinner-borderen.spinner-grow vir verbeterde intydse aanpassing. Waardes vir die CSS-veranderlikes word via Sass ingestel, so Sass-aanpassing word ook steeds ondersteun.

Grensdraaier veranderlikes:

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

Groeiende spinner veranderlikes:

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

Vir albei draaiers word klein draaierwysigerklasse gebruik om die waardes van hierdie CSS-veranderlikes op te dateer soos nodig. Die .spinner-border-smklas doen byvoorbeeld die volgende:

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

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