Spinner te an ni

Bootstrap spinners hmanga component emaw page emaw loading state tarlanna, HTML, CSS hmanga siam vek, leh JavaScript awm lo.

He page ah hian

Lam

Bootstrap “spinners” hmangin i project-a loading state i lantir thei ang. HTML leh CSS chauh hmanga siam an ni a, chu chu siam nan JavaScript i mamawh lo tihna a ni. Mahse, an hmuh theihna toggle tur chuan custom JavaScript engemaw zat i mamawh ang. An hmel, alignment, leh sizing te chu awlsam takin kan utility class mak tak tak hmangin kan siam danglam thei a ni.

Accessibility atan chuan hetah hian loader tin hian role="status"leh a nested <span class="visually-hidden">Loading...</span>.

He component hian animation effect hi prefers-reduced-motionmedia query ah a innghat a ni. Kan accessibility documentation a reduced motion tih hi en la .

Border spinner a ni

Loading indicator rit lo tak hmuh theih nan border spinners hmang ang che.

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

A rawng hrang hrang

Border spinner hian a currentColoratan a hmang a , chu chu text color utilitiesborder-color hmangin color chu i duh angin i siam thei tihna a ni . Kan text color utility eng pawh hi standard spinner ah hian i hmang thei ang.

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

Engvangin nge border-colorutilities hi hman loh vang? Border spinner tin hian transparentside pakhat tal tan border an tarlang a, chuvangin .border-{color}utilities te chuan chu chu an override ang.

Spinner lian zel

Border spinner i fancy loh chuan grow spinner ah switch la. Technical lamah a spin loh laiin a lo thang lian fo thin!

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

Vawi khat chu he spinner hi , hmanga siam a currentColornih avangin awlsam takin a hmel chu text color utilities hmangin i thlak thei ang . Hetah hian blue in a awm a, supported variants te nen.

<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 tih a ni

Bootstrap-a spinner te hi rems, currentColor, leh display: inline-flex. Hei hian awlsam takin an size tihdanglam theih a ni a, recolor theih a ni a, rang taka align theih a ni tihna a ni.

Sir

Margin utilities ang chi hmang la , .m-5spacing awlsam zawk nan.

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

Hmun dahna tur

Flexbox utilities , float utilities , emaw text alignment utilities hmangin eng dinhmunah pawh spinner i mamawhna hmunah chiah dah rawh.

Thlep

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

Loading mek a ni...

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

Floats a ni

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

Text chu a inmil tur a ni

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

Lenzawng tehna

Add .spinner-border-smleh .spinner-grow-smcomponent dang chhunga rang taka hman theih tur spinner te zawk siam turin.

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

A nih loh leh, custom CSS emaw inline style hmangin a tul angin dimension te chu thlak danglam theih a ni.

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

Buttons te a awm

Button chhunga spinner hmang la, action pakhat chu tuna process mek emaw, thleng mek emaw a nih thu hriattir rawh. Spinner element atanga text chu i swap chhuak thei bawk a, a tul angin button text i hmang thei bawk.

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

Variables te pawh a awm

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

Keyframe te pawh a awm

Kan spinner te tana CSS animation siamna atana hman thin. ah hian a tel a scss/_spinners.scssni .

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

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