in English

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.

html

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

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>

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!

html

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

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

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.

html

<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

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>

Anoyangarara

html

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

Rongedza mavara

html

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

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>

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

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>

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.

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

Variables

Yakawedzerwa mu v5.2.0

Sechikamu cheBootstrap's evolving CSS variables approach, maspinners zvino anoshandisa emuno CSS machinjiro .spinner-borderuye .spinner-grownekusimudzira chaiyo-nguva kugadzirisa. Hwaro hwemhando dzeCSS dzakaiswa kuburikidza neSass, saka Sass customization ichiri kutsigirwa, zvakare.

Border spinner zvakasiyana:

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

Kukura spinner zvakasiyana:

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

Kune ese ari maviri maspinner, madiki spinner modifier makirasi anoshandiswa kugadzirisa kukosha kweaya maCSS akasiyana sezvinodiwa. Semuenzaniso, .spinner-border-smkirasi inoita zvinotevera:

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

Sass zvakasiyana

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