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

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

एह पन्ना पर दिहल गइल बा

बारे में

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

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

आकार

Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components.

html

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

Or, use custom CSS or inline styles to change the dimensions as needed.

html

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

Buttons

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

html

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

html

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

CSS

Variables

Added in v5.2.0

As part of Bootstrap’s evolving CSS variables approach, spinners now use local CSS variables on .spinner-border and .spinner-grow for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Border spinner variables:

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

Growing spinner variables:

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

दुनों स्पिनर सभ खातिर, जरूरत के हिसाब से एह CSS चर सभ के मान सभ के अपडेट करे खातिर छोट स्पिनर संशोधक क्लास सभ के इस्तेमाल कइल जाला। जइसे कि .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;

कीफ्रेम के बारे में बतावल गइल बा

हमनी के स्पिनर खातिर सीएसएस एनीमेशन बनावे खातिर इस्तेमाल होला। में शामिल कइल गइल बा scss/_spinners.scss.

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

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