Spinners

Jou de laadstatus fan in komponint of side oan mei Bootstrap-spinners, folslein boud mei HTML, CSS, en gjin JavaScript.

Op dizze side

Oer

Bootstrap "spinners" kinne brûkt wurde om de laden steat yn jo projekten sjen te litten. Se binne allinich boud mei HTML en CSS, wat betsjuttet dat jo gjin JavaScript hawwe om se te meitsjen. Jo sille lykwols wat oanpast JavaScript nedich wêze om har sichtberens te wikseljen. Har uterlik, ôfstimming en grutte kinne maklik wurde oanpast mei ús geweldige nutklassen.

Foar tagonklikensdoelen omfettet elke loader hjir role="status"en in nestele <span class="visually-hidden">Loading...</span>.

It animaasje-effekt fan dizze komponint is ôfhinklik fan 'e prefers-reduced-motionmediafraach. Sjoch de seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .

Border spinner

Brûk de grins spinners foar in lichtgewicht laden yndikator.

html

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

Kleuren

De rânespinner brûkt currentColorfoar har border-color, wat betsjuttet dat jo de kleur kinne oanpasse mei tekstkleurhelpprogramma's . Jo kinne elk fan ús tekstkleur-hulpprogramma's brûke op 'e standert spinner.

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>

Wêrom net brûke border-colornutsbedriuwen? Elke grinsspinner spesifisearret in transparentgrins foar op syn minst ien kant, sadat .border-{color}nutsbedriuwen dat oerskriuwe.

Groeiende spinner

As jo gjin grinsspinner hawwe, wikselje dan oer nei de groeispinner. Hoewol it technysk net draait, groeit it hieltyd wer!

html

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

Nochris is dizze spinner boud mei currentColor, sadat jo it uterlik maklik kinne feroarje mei tekstkleurhelpprogramma's . Hjir is it yn blau, tegearre mei de stipe farianten.

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>

Alignment

Spinners yn Bootstrap binne boud mei rems, currentColor, en display: inline-flex. Dit betsjut dat se maklik kinne wurde feroare, opnij kleure en fluch ôfstimd.

Marge

Brûk marzje-hulpprogramma's lykas .m-5foar maklike ôfstân.

html

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

Pleatsing

Brûk flexbox-helpprogramma's , float -helpprogramma's , of tekstôfstimmingshelpprogramma 's om spinners krekt te pleatsen wêr't jo se yn elke situaasje nedich binne.

Flex

html

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

Loading...

html

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

Floats

html

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

Tekst align

html

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

Grutte

Foegje .spinner-border-smen .spinner-grow-smmeitsje in lytsere spinner dy't fluch kin wurde brûkt binnen oare komponinten.

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 brûk oanpaste CSS- of ynline-stilen om de dimensjes te feroarjen as nedich.

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>

Knoppen

Brûk spinners binnen knoppen om oan te jaan dat in aksje op it stuit wurdt ferwurke of plakfynt. Jo kinne de tekst ek wikselje út it spinner-elemint en brûk knoptekst as nedich.

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

Fariabelen

Taheakke yn v5.2.0

As ûnderdiel fan Bootstrap's evoluearjende CSS-fariabelen oanpak, brûke spinners no lokale CSS-fariabelen op .spinner-borderen .spinner-growfoar ferbettere real-time oanpassing. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

Border spinner fariabelen:

  --#{$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 spinnerfariabelen:

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

Foar beide spinners wurde lytse spinner-modifikaasjeklassen brûkt om de wearden fan dizze CSS-fariabelen as nedich te aktualisearjen. Bygelyks, de .spinner-border-smklasse docht it folgjende:

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

Sass fariabelen

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

Keyframes

Wurdt brûkt foar it meitsjen fan de CSS-animaasjes foar ús spinners. Opnaam yn scss/_spinners.scss.

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

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