बूटस्ट्रैप 4 स्पिनर
स्पिनर्स
स्पिनर/लोडर बनाने के लिए, .spinner-borderकक्षा का उपयोग करें:
लोड हो रहा है..
उदाहरण
<div class="spinner-border"></div>
रंगीन स्पिनर
स्पिनर में रंग जोड़ने के लिए किसी भी टेक्स्ट कलर यूटिलिटी का उपयोग करें:
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
उदाहरण
<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>
बढ़ते स्पिनर
.spinner-growयदि आप "स्पिन" के बजाय स्पिनर/लोडर को विकसित करना चाहते हैं तो कक्षा का उपयोग करें :
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
लोड हो रहा है..
उदाहरण
<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-border-smया बनाने के लिए:.spinner-grow-sm
लोड हो रहा है..
लोड हो रहा है..
उदाहरण
<div class="spinner-border
spinner-border-sm"></div>
<div class="spinner-grow
spinner-grow-sm"></div>
स्पिनर बटन
आप टेक्स्ट के साथ या उसके बिना भी स्पिनरों को एक बटन में जोड़ सकते हैं:
उदाहरण
<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>