Spinners

Ratidza mamiriro ekurodha echikamu kana peji ine Bootstrap spinners, yakavakwa zvachose neHTML, CSS, uye isina JavaScript.

Pa peji ino

About

Bootstrap "spinners" inogona kushandiswa kuratidza mamiriro ekurodha mumapurojekiti ako. Iwo anovakwa chete neHTML neCSS, zvichireva kuti haudi chero JavaScript kuti uzvigadzire. Iwe, zvakadaro, uchada imwe tsika JavaScript yekushandura kuoneka kwavo. Chitarisiko chavo, kurongeka, uye saizi zvinogona kugadziridzwa zviri nyore nemakirasi edu anoshamisa ekushandisa.

Nezvinangwa zvekuwanikwa, chimwe nechimwe chinorodha pano chinosanganisira role="status"uye nested <span class="visually-hidden">Loading...</span>.

Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

Border spinner

Shandisa mabhodha spinners kune lightweight kurodha chiratidzo.

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

Colors

Iyo bhodha spinner inoshandisa currentColoryayo border-color, zvichireva kuti iwe unogona kugadzirisa iyo ruvara nemavara mavara ekushandisa . Iwe unogona kushandisa chero yedu mavara mavara ekushandisa pane yakajairwa spinner.

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

Wadii kushandisa border-colorzvishandiso? Imwe neimwe bhodha spinner inotsanangudza muganho transparentkune rimwechete divi, saka .border-{color}zvekushandisa zvaizopfuura izvo.

Kukura spinner

Kana iwe usingafarire bhodha spinner, chinja kune inokura spinner. Kunyange isingatenderere nehunyanzvi, inoramba ichikura!

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

Zvekare, iyi spinner inovakwa ne currentColor, saka iwe unogona nyore kushandura kutaridzika kwayo nemavara mavara ekushandisa . Heino iri mubhuruu, pamwe chete nemisiyano inotsigirwa.

<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

Spinner muBootstrap inovakwa ne rems, currentColor, uye display: inline-flex. Izvi zvinoreva kuti dzinogona kugadziridzwa nyore, kudzokororwa, uye nekukasira kurongeka.

Margin

Shandisa margin utilities senge .m-5kurerukira nzvimbo.

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

Placement

Shandisa flexbox utilities , float utilities , kana mameseji alignment utilities kuti uise maspinner paunoda chero mamiriro ezvinhu.

Flex

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

Loading...

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

Anoyangarara

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

Rongedza mavara

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

Size

Wedzera .spinner-border-smuye .spinner-grow-smkugadzira diki spinner inogona kukurumidza kushandiswa mukati mezvimwe zvikamu.

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

Kana, shandisa tsika CSS kana inline masitaera kushandura zviyero sezvinodiwa.

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

Mabhatani

Shandisa ma spinners mukati memabhatani kuratidza chiitiko chirikugadziriswa kana kuitika. Iwe unogona zvakare kuchinja mameseji kunze kweiyo spinner element uye shandisa bhatani mameseji sezvinodiwa.

<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

Variables

$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

Inoshandiswa kugadzira iyo CSS animations kune edu maspinner. Inosanganisirwa mu scss/_spinners.scss.

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

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