Mga Spinner

Ipahiwatig ang estado ng paglo-load ng isang bahagi o page na may mga Bootstrap spinner, na ganap na binuo gamit ang HTML, CSS, at walang JavaScript.

Sa pahinang ito

Tungkol sa

Maaaring gamitin ang "mga spinner" ng Bootstrap upang ipakita ang estado ng paglo-load sa iyong mga proyekto. Binuo lang ang mga ito gamit ang HTML at CSS, ibig sabihin, hindi mo kailangan ng anumang JavaScript upang gawin ang mga ito. Gayunpaman, kakailanganin mo ng ilang custom na JavaScript upang i-toggle ang kanilang visibility. Ang kanilang hitsura, pagkakahanay, at laki ay madaling ma-customize sa aming mga kamangha-manghang mga klase ng utility.

Para sa mga layunin ng accessibility, ang bawat loader dito ay may kasamang role="status"at isang nested <span class="visually-hidden">Loading...</span>.

Ang epekto ng animation ng bahaging ito ay nakasalalay sa prefers-reduced-motionquery ng media. Tingnan ang seksyon ng pinababang paggalaw ng aming dokumentasyon ng pagiging naa-access .

Border spinner

Gamitin ang mga border spinner para sa isang lightweight loading indicator.

html

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

Mga kulay

Ang border spinner ay gumagamit currentColornito border-color, ibig sabihin, maaari mong ipasadya ang kulay gamit ang mga gamit ng kulay ng teksto . Maaari mong gamitin ang alinman sa aming mga gamit sa kulay ng teksto sa karaniwang 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>

Bakit hindi gumamit border-colorng mga utility? Ang bawat border spinner ay tumutukoy ng transparenthangganan para sa hindi bababa sa isang panig, kaya .border-{color}i-override iyon ng mga utility.

Lumalagong spinner

Kung hindi mo gusto ang isang border spinner, lumipat sa grow spinner. Bagama't hindi ito teknikal na umiikot, paulit-ulit itong lumalaki!

html

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

Muli, ang spinner na ito ay binuo gamit ang currentColor, kaya madali mong mababago ang hitsura nito gamit ang mga gamit sa kulay ng teksto . Narito ito sa asul, kasama ang mga sinusuportahang variant.

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>

Pag-align

Ang mga spinner sa Bootstrap ay binuo gamit ang rems, currentColor, at display: inline-flex. Nangangahulugan ito na ang mga ito ay madaling mapalitan ang laki, recolored, at mabilis na ihanay.

Margin

Gumamit ng mga margin utility tulad .m-5ng para sa madaling espasyo.

html

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

Paglalagay

Gumamit ng flexbox utilities , float utilities , o text alignment utilities upang ilagay ang mga spinner nang eksakto kung saan mo kailangan ang mga ito sa anumang sitwasyon.

Flex

html

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

Naglo-load...

html

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

Lumulutang

html

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

I-align ang text

html

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

Sukat

Magdagdag .spinner-border-smat .spinner-grow-smgumawa ng mas maliit na spinner na mabilis na magagamit sa loob ng iba pang mga bahagi.

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>

O kaya, gumamit ng custom na CSS o mga inline na istilo upang baguhin ang mga dimensyon kung kinakailangan.

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>

Mga Pindutan

Gumamit ng mga spinner sa loob ng mga button upang isaad ang isang aksyon na kasalukuyang pinoproseso o nagaganap. Maaari mo ring palitan ang teksto mula sa elemento ng spinner at gamitin ang text ng button kung kinakailangan.

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

Mga variable

Idinagdag sa v5.2.0

Bilang bahagi ng umuusbong na mga variable ng CSS ng Bootstrap, ginagamit na ngayon ng mga spinner ang mga lokal na variable ng CSS sa .spinner-borderat .spinner-growpara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

Mga variable ng border spinner:

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

Lumalagong mga variable ng spinner:

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

Para sa parehong mga spinner, ginagamit ang maliliit na spinner modifier class para i-update ang mga value ng mga variable na CSS na ito kung kinakailangan. Halimbawa, .spinner-border-smginagawa ng klase ang sumusunod:

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

Sass variable

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

Mga Keyframe

Ginagamit para sa paglikha ng mga animation ng CSS para sa aming mga spinner. Kasama sa scss/_spinners.scss.

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

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