स्पिनर

बूटस्ट्रैप स्पिनर कें साथ कोनों घटक या पृष्ठ कें लोडिंग स्थिति कें संकेत करूं, जे पूरा तरह सं 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>

सीएसएस

चर

v5.2.0 मे जोड़ा गेल

बूटस्ट्रैप केरऽ विकसित सीएसएस चर दृष्टिकोण के हिस्सा के रूप म॑, स्पिनर अब॑ बढ़लऽ वास्तविक समय अनुकूलन प॑ .spinner-borderआरू ओकरा लेली स्थानीय सीएसएस चर के उपयोग करै छै । .spinner-growCSS चर क लेल मान Sass क माध्यम स सेट कएल गेल अछि, अतः Sass अनुकूलन एखनो समर्थित अछि, सेहो.

सीमा स्पिनर चर: 1।

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

बढ़ते स्पिनर चर: 1।

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

दूनू स्पिनर कें लेल, जरूरत कें अनुसार इ सीएसएस चर कें मान अपडेट करय कें लेल छोट स्पिनर संशोधक वर्गक कें उपयोग करल जाय छै. जेना, .spinner-border-smक्लास निम्नलिखित काज करैत अछि:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

सस्स चर

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

कीफ्रेम

हमरऽ स्पिनरऽ लेली CSS एनीमेशन बनाबै लेली प्रयोग करलऽ जाय छै । में शामिल अछि scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}