in English

स्पिनर

बूटस्ट्रैप स्पिनर कें साथ कोनों घटक या पृष्ठ कें लोडिंग स्थिति कें संकेत करूं, जे पूरा तरह सं HTML, CSS, आरू कोनों जावास्क्रिप्ट कें साथ निर्मित छै.

विषय में

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

सुलभता कें उद्देश्य सं, प्रत्येक लोडर एतय शामिल छै role="status"आ एकटा नेस्टेड <span class="sr-only">Loading...</span>.

एहि घटक क एनीमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरी पर निर्भर करैत अछि । हमर सुलभता दस्तावेजीकरणक कम गति अनुभाग देखू .

सीमा स्पिनर

हल्का लोडिंग संकेतक कें लेल सीमा स्पिनर कें उपयोग करूं.

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

रंग

सीमा स्पिनर currentColorअपन लेल उपयोग करैत अछि , मतलब अहाँ पाठ रंग उपयोगिताborder-color क संग रंग अनुकूलित क सकैत छी . अहां मानक स्पिनर पर हमर कोनो टेक्स्ट कलर यूटिलिटी के उपयोग क सकय छी.

<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>
उपयोगिता क उपयोग कियैक नहि करब border-color? transparentप्रत्येक सीमा स्पिनर कम सं कम एकटा पक्ष कें लेल एकटा सीमा निर्दिष्ट करयत छै , अइ कें लेल .border-{color}उपयोगिता ओकरा ओवरराइड करतय.

बढ़ते स्पिनर

अगर अहां के बॉर्डर स्पिनर के फैंसी नहि अछि त ग्रो स्पिनर पर स्विच करू. जखन कि ई तकनीकी रूप स घुमैत नै अछि, मुदा बेर-बेर बढ़ैत अछि !

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

एक बेर फेर, ई स्पिनर के संग बनल अछि , जाहि सं अहां टेक्स्ट कलर यूटिलिटीजcurrentColor सं एकर रूप आसानी सं बदलि सकय छी . एतय ई नील रंग मे अछि, संगहि समर्थित रूपांतर सेहो ।

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

संरेखण

बूटस्ट्रैप मे स्पिनर rems, currentColor, आ display: inline-flex. मतलब इ आसानी सं आकार बदलल जा सकय छै, रंग बदलल जा सकय छै, आ जल्दी सं संरेखित कैल जा सकय छै.

हाशिया

आसान अंतराल के लेल जेना मार्जिन उपयोगिता के उपयोग करू ..m-5

<div class="spinner-border m-5" role="status">
  <span class="sr-only">Loading...</span>
</div>

प्लेसमेंट

flexbox उपयोगिता , फ्लोट उपयोगिता , या पाठ संरेखण उपयोगिता कें उपयोग करूं ताकि स्पिनर कें कोनों स्थिति मे ठीक ओतय रखूं जतय अहां कें जरूरत होयत छै.

लचीला

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

तैरता अछि

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

पाठ संरेखित करू

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

माप

जोड़ूं .spinner-border-smआ .spinner-grow-smएकटा छोट स्पिनर बनावा कें लेल जे जल्दी सं अन्य घटकक कें भीतर उपयोग कैल जा सकय छै.

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

अथवा, आवश्यकतानुसार आयाम बदलै लेली कस्टम CSS या इनलाइन शैली के प्रयोग करलऽ जाय ।

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

बटन के

बटन कें भीतर स्पिनर कें उपयोग इ इंगित करय कें लेल करूं कि कोनों क्रिया वर्तमान मे संसाधित भ रहल छै या भ रहल छै. आप स्पिनर तत्व स॑ बाहर पाठ क॑ स्वैप भी करी सकै छियै आरू जरूरत के अनुसार बटन पाठ क॑ उपयोग करी सकै छियै ।

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