स्पिनर लोग के बा
बूटस्ट्रैप स्पिनर सभ के साथ कौनों घटक भा पन्ना के लोडिंग स्टेट के संकेत दीं, जे पूरा तरीका से एचटीएमएल, सीएसएस, आ कौनों जावास्क्रिप्ट के साथ बनावल गइल होखे।
बारे में
बूटस्ट्रैप “स्पिनर” के इस्तेमाल रउरा प्रोजेक्टन में लोडिंग स्टेट देखावे खातिर कइल जा सकेला. ई खाली एचटीएमएल आ सीएसएस से बनावल गइल बा, मतलब कि एकरा के बनावे खातिर रउरा कवनो जावास्क्रिप्ट के जरूरत नइखे. हालाँकि, इनहन के दृश्यता के टॉगल करे खातिर रउआँ के कुछ कस्टम जावास्क्रिप्ट के जरूरत पड़ी। इनहन के रूप, संरेखण, आ आकार के हमनी के अद्भुत उपयोगिता वर्गन के साथ आसानी से अनुकूलित कइल जा सकेला।
सुलभता के उद्देश्य से, इहाँ हर लोडर में शामिल बा role="status"
आ एगो नेस्टेड <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
मीडिया क्वेरी पर निर्भर होला। हमनी के सुलभता दस्तावेज के रिड्यूस्ड मोशन सेक्शन देखल जाव
.
सीमा स्पिनर के बा
हल्का लोडिंग इंडिकेटर खातिर बॉर्डर स्पिनर के इस्तेमाल करीं।
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
रंग-बिरंग के बा
बॉर्डर स्पिनर एकरा currentColor
खातिर इस्तेमाल करेला , मतलब कि रउआ टेक्स्ट कलर यूटिलिटीजborder-color
के साथ रंग के अनुकूलित कर सकेनी . रउआ मानक स्पिनर पर हमनी के कवनो टेक्स्ट कलर यूटिलिटी के इस्तेमाल कर सकेनी।
<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>
border-color
उपयोगिता के इस्तेमाल कइल जाव? transparent
हर बॉर्डर स्पिनर कम से कम एक साइड खातिर
एगो बॉर्डर निर्दिष्ट करे ला
, एह से .border-{color}
यूटिलिटी सभ ओह बात के ओवरराइड करीहें।
बढ़त स्पिनर के बा
अगर रउरा बॉर्डर स्पिनर के फैंसी नइखे त ग्रो स्पिनर पर स्विच करीं. हालांकि ई तकनीकी रूप से ना घूमेला बाकिर बार-बार बढ़ेला!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
एक बार फिर से, इ स्पिनर के साथ बनावल गईल बा currentColor
, एहसे आप आसानी से टेक्स्ट कलर यूटिलिटीज के संगे एकर रूप बदल सकतानी । इहाँ ई नीला रंग में बा, साथ में समर्थित वेरिएंट भी बा।
<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>
संरेखण के बा
बूटस्ट्रैप में स्पिनर के rem
s, currentColor
, आ के साथ बनावल जाला display: inline-flex
। मतलब कि इनहन के आकार आसानी से बदलल जा सके ला, रंग बदलल जा सके ला आ जल्दी से संरेखित कइल जा सके ला।
हाशिया
आसान स्पेसिंग खातिर जइसन मार्जिन यूटिलिटीज के इस्तेमाल करीं ..m-5
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
प्लेसमेंट के बा
कवनो भी स्थिति में स्पिनर के ठीक ओहिजा रखे खातिर flexbox utilities , float utilities , या टेक्स्ट संरेखण उपयोगिता के इस्तेमाल करीं।
मोड़ल
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
तैरत बा
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
पाठ के संरेखित कइल जाला
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
आकार
जोड़ल जाव .spinner-border-sm
आ .spinner-grow-sm
एगो छोट स्पिनर बनावे खातिर जवना के जल्दी से दोसरा घटकन का भीतर इस्तेमाल कइल जा सके.
<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>
या, जरूरत के हिसाब से आयाम बदले खातिर कस्टम सीएसएस या इनलाइन स्टाइल के इस्तेमाल करीं।
<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>
बटन के बा
बटन सभ के भीतर स्पिनर सभ के इस्तेमाल ई बतावे खातिर करीं कि कौनों क्रिया वर्तमान में प्रोसेस हो रहल बा या हो रहल बा। आप स्पिनर तत्व से टेक्स्ट के स्वैप भी क सकत बानी आ जरूरत के हिसाब से बटन टेक्स्ट के इस्तेमाल कर सकत बानी।
<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>
<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>
ससस के बा
चर के बारे में बतावल गइल बा
$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;
कीफ्रेम के बारे में बतावल गइल बा
हमनी के स्पिनर खातिर सीएसएस एनीमेशन बनावे खातिर इस्तेमाल होला। में शामिल कइल गइल बा scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}