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.

html tih a ni

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

html tih a ni

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

html tih a ni

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

html tih a ni

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

html tih a ni

<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

html tih a ni

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

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

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

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

html tih a ni

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

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

html tih a ni

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

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

Variables te pawh a awm

v5.2.0 ah dah belh a ni

Bootstrap-in CSS variables approach a kalpui mek zingah hian spinners te chuan local CSS variables te chu on .spinner-borderleh .spinner-growfor enhanced real-time customization atan an hmang ta a ni. CSS variable hrang hrangte tana value te hi Sass hmanga set a nih avangin Sass customization pawh a la support reng bawk.

Border spinner hrang hrangte chu: 1.1.

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

Spinner variable lian zel te:

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

Spinner pahnih tan hian spinner modifier class te tak te hmangin heng CSS variable te value te hi a tul angin update thin a ni. Entirnan, .spinner-border-smclass hian a hnuaia mi ang hian a ti thin:

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

Sass a danglam thei

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