Spinner te an ni

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

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="sr-only">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="sr-only">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="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">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="sr-only">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="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">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="sr-only">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="sr-only">Loading...</span>
  </div>
</div>

Loading mek a ni...

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

Floats a ni

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Text chu a inmil tur a ni

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">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="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">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="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">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="sr-only">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="sr-only">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>