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