Mga spinner

Ipaila ang kahimtang sa pagkarga sa usa ka sangkap o panid nga adunay mga Bootstrap spinner, nga hingpit nga gihimo gamit ang HTML, CSS, ug walay JavaScript.

Niini nga panid

Mahitungod sa

Ang "mga spinner" sa Bootstrap mahimong magamit aron ipakita ang kahimtang sa pagkarga sa imong mga proyekto. Gitukod lang kini gamit ang HTML ug CSS, nga nagpasabot nga dili nimo kinahanglan ang bisan unsang JavaScript sa paghimo niini. Hinuon, kinahanglan nimo ang pipila ka naandan nga JavaScript aron ma-toggle ang ilang visibility. Ang ilang hitsura, pagkahan-ay, ug gidak-on dali nga mapasibo sa among talagsaon nga mga klase sa utility.

Para sa mga katuyoan sa accessibility, ang matag loader dinhi naglakip role="status"ug usa ka nested <span class="visually-hidden">Loading...</span>.

Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Border spinner

Gamita ang border spinners para sa lightweight loading indicator.

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

Mga kolor

Ang border spinner naggamit currentColoralang niini border-color, nagpasabut nga mahimo nimong ipasibo ang kolor gamit ang mga gamit sa kolor sa teksto . Mahimo nimong gamiton ang bisan unsa sa among mga gamit sa kolor sa teksto sa standard 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>

Nganong dili gamiton ang mga border-colorutilities? Ang matag spinner sa utlanan nagtino sa usa ka transparentutlanan alang sa labing menos usa ka kilid, aron ang mga .border-{color}utilities molapas niana.

Nagtubo nga spinner

Kung dili ka ganahan og border spinner, balhin sa grow spinner. Samtang kini dili teknikal nga pagtuyok, kini balik-balik nga pagtubo!

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

Sa makausa pa, kini nga spinner gitukod gamit ang currentColor, aron dali nimo mabag-o ang hitsura niini gamit ang mga gamit sa kolor sa teksto . Ania kini sa asul, kauban ang gisuportahan nga mga variant.

<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 gihimo gamit remang s, currentColor, ug display: inline-flex. Kini nagpasabut nga dali ra silang mabag-o, mabag-o ang kolor, ug dali nga ma-align.

Margin

Gamita ang mga gamit sa margin sama .m-5sa alang sa dali nga gilay-on.

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

Pagpahimutang

Gamita ang flexbox utilities , float utilities , o text alignment utilities aron ibutang ang mga spinner sa eksakto kung asa nimo kini gikinahanglan sa bisan unsang sitwasyon.

Flex

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

Nagkarga...

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

Naglutaw

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

Pag-align sa teksto

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

Gidak-on

Idugang .spinner-border-smug .spinner-grow-smpaghimo og mas gamay nga spinner nga dali nga magamit sulod sa ubang mga sangkap.

<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, gamita ang naandan nga CSS o inline nga mga istilo aron usbon ang mga sukat kung gikinahanglan.

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

Gamita ang mga spinner sulod sa mga buton aron ipakita nga ang usa ka aksyon sa pagkakaron ginaproseso o nagakahitabo. Mahimo usab nimong ibaylo ang teksto gikan sa elemento sa spinner ug gamiton ang buton nga teksto kung gikinahanglan.

<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

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

Keyframes

Gigamit alang sa paghimo sa mga animation sa CSS alang sa among mga spinner. Apil 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;
  }
}