मुख्य सामग्री पर जाईं डॉक्स नेविगेशन पर जाईं
in English

स्पिनर लोग के बा

बूटस्ट्रैप स्पिनर सभ के साथ कौनों घटक भा पन्ना के लोडिंग स्टेट के संकेत दीं, जे पूरा तरीका से एचटीएमएल, सीएसएस, आ कौनों जावास्क्रिप्ट के साथ बनावल गइल होखे।

बारे में

बूटस्ट्रैप “स्पिनर” के इस्तेमाल रउरा प्रोजेक्टन में लोडिंग स्टेट देखावे खातिर कइल जा सकेला. ई खाली एचटीएमएल आ सीएसएस से बनावल गइल बा, मतलब कि एकरा के बनावे खातिर रउरा कवनो जावास्क्रिप्ट के जरूरत नइखे. हालाँकि, इनहन के दृश्यता के टॉगल करे खातिर रउआँ के कुछ कस्टम जावास्क्रिप्ट के जरूरत पड़ी। इनहन के रूप, संरेखण, आ आकार के हमनी के अद्भुत उपयोगिता वर्गन के साथ आसानी से अनुकूलित कइल जा सकेला।

सुलभता के उद्देश्य से, इहाँ हर लोडर में शामिल बा 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>

संरेखण के बा

बूटस्ट्रैप में स्पिनर के rems, 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;
  }
}