Bootstrap 4 Spinners
လှည့်စားသူများ
spinner/loader ဖန်တီးရန်၊ .spinner-border
class ကိုသုံးပါ-
ဒိန်း..
ဥပမာ
<div class="spinner-border"></div>
ရောင်စုံလှည့်ကွက်များ
ချည်စက် သို့ အရောင်တစ်ခုထည့်ရန် မည်သည့် စာသားအရောင် utilite ကိုသုံးပါ
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဥပမာ
<div class="spinner-border text-muted"></div>
<div class="spinner-border
text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border
text-warning"></div>
<div class="spinner-border text-danger"></div>
<div
class="spinner-border text-secondary"></div>
<div class="spinner-border
text-dark"></div>
<div class="spinner-border text-light"></div>
ကြီးထွားလာသော Spinners
.spinner-grow
"spin" အစား spinner/loader ကိုကြီးထွားစေလိုလျှင် class ကိုသုံး ပါ-
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဒိန်း..
ဥပမာ
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div
class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
Spinner အရွယ်အစား
သေးငယ်သော spinner ကိုဖန်တီးရန် .spinner-border-sm
သို့မဟုတ် အသုံးပြုရန် -.spinner-grow-sm
ဒိန်း..
ဒိန်း..
ဥပမာ
<div class="spinner-border
spinner-border-sm"></div>
<div class="spinner-grow
spinner-grow-sm"></div>
Spinner ခလုတ်များ
စာသားပါသော သို့မဟုတ် မပါဘဲ ခလုတ်တစ်ခုသို့ spinner များကိုလည်း ထည့်နိုင်သည်။
ဥပမာ
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>