in English

Snúðar

Tilgreindu hleðsluástand íhluta eða síðu með Bootstrap-snúningum, smíðaðir að öllu leyti með HTML, CSS og engu JavaScript.

Á þessari síðu

Um

Hægt er að nota „spinnara“ ræsibúnað til að sýna hleðslustöðu í verkefnum þínum. Þau eru eingöngu byggð með HTML og CSS, sem þýðir að þú þarft ekki JavaScript til að búa þau til. Þú þarft hins vegar sérsniðið JavaScript til að skipta um sýnileika þeirra. Auðvelt er að aðlaga útlit þeirra, röðun og stærð með ótrúlegum tólum okkar.

Í aðgengisskyni inniheldur hver hleðslutæki hér role="status"og hreiður <span class="visually-hidden">Loading...</span>.

Hreyfiáhrif þessa íhluts eru háð prefers-reduced-motionmiðlunarfyrirspurninni. Sjá kaflann um minni hreyfingu í aðgengisskjölunum okkar .

Border spinner

Notaðu kantsnúningana fyrir léttan hleðsluvísi.

html

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

Litir

Border spinner notar currentColorfyrir sitt border-color, sem þýðir að þú getur sérsniðið litinn með texta litabúnaði . Þú getur notað hvaða textalitabúnað sem er á venjulegum snúningi.

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>

Af hverju ekki að nota border-colortól? Hver jaðarsnúningur tilgreinir transparentlandamæri fyrir að minnsta kosti eina hlið, svo .border-{color}tól myndu hnekkja því.

Vaxandi spuna

Ef þig langar ekki í landamærasnúða skaltu skipta yfir í vaxtarspuna. Þó að það snúist ekki tæknilega, þá vex það ítrekað!

html

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

Enn og aftur er þessi snúningur byggður með currentColor, svo þú getur auðveldlega breytt útliti hans með textalitatólum . Hér er það í bláu, ásamt studdum afbrigðum.

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>

Jöfnun

Spinners í Bootstrap eru smíðaðir með rems, currentColor, og display: inline-flex. Þetta þýðir að auðvelt er að breyta stærð þeirra, lita þau upp á nýtt og fljótt aðlaga.

Framlegð

Notaðu framlegðartól eins og .m-5til að auðvelda bil.

html

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

Staðsetning

Notaðu flexbox tól , flot tól eða textajöfnunartól til að staðsetja snúninga nákvæmlega þar sem þú þarft þá í hvaða aðstæðum sem er.

Flex

html

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

Hleður...

html

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

Fljótur

html

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

Textajafna

html

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

Stærð

Bættu við .spinner-border-smog .spinner-grow-smtil að búa til minni snúning sem fljótt er hægt að nota í öðrum hlutum.

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>

Eða notaðu sérsniðna CSS eða innbyggða stíl til að breyta víddunum eftir þörfum.

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>

Hnappar

Notaðu snúninga innan hnappa til að gefa til kynna að aðgerð sé í vinnslu eða á sér stað. Þú getur líka skipt textanum út úr snúningshlutanum og notað hnappatexta eftir þörfum.

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

Breytur

Bætt við í v5.2.0

Sem hluti af CSS breytum í þróun Bootstrap, nota spunaspilarar nú staðbundnar CSS breytur á .spinner-borderog .spinner-growfyrir aukna rauntíma aðlögun. Gildi fyrir CSS breyturnar eru stillt í gegnum Sass, þannig að Sass aðlögun er enn studd líka.

Border spinner breytur:

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

Vaxandi snúningsbreytur:

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

Fyrir báða spuna eru litlir spunabreytiflokkar notaðir til að uppfæra gildi þessara CSS breyta eftir þörfum. Til dæmis gerir .spinner-border-smbekkurinn eftirfarandi:

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

Sass breytur

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

Lyklarammar

Notað til að búa til CSS hreyfimyndir fyrir spuna okkar. Innifalið í scss/_spinners.scss.

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

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