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

स्पिनर करने वाले

बूटस्ट्रैप स्पिनरें कन्नै इक घटक जां पृष्ठ दी लोडिंग स्थिति गी दर्शाओ, जेह् ड़ा पूरी चाल्ली HTML, CSS, ते कोई जावास्क्रिप्ट कन्नै बनाया गेदा ऐ.

इस पेज पर

तकरीबन

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

सुलभता दे उद्देशें लेई, हर लोडर इत्थै शामल ऐ 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 उपयोगिताएं , फ्लोट उपयोगिताएं , जां पाठ संरेखण उपयोगिताएं दा इस्तेमाल करो जित्थै तुसेंगी कुसै बी स्थिति च उंदी लोड़ ऐ.

मोड़ना

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

या, जरूरत मताबक आयाम बदलने लेई कस्टम CSS जां इनलाइन शैलियें दा इस्तेमाल करो.

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