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

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

सीएसएस दा

चर करने वाले

v5.2.0 च जोड़ेआ गेआ

बूटस्ट्रैप दे विकसित CSS चर दृष्टिकोण दे हिस्से दे रूप च, स्पिनर हून बधाए गेदे रियल-टाइम अनुकूलन पर .spinner-borderते उंदे आस्तै लोकल CSS चर दा उपयोग करदे न। .spinner-growCSS चर आस्तै मूल्यें गी Sass दे राहें सेट कीता जंदा ऐ, इसलेई Sass अनुकूलन अजें बी समर्थत ऐ, बी.

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

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

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

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

कीफ्रेम दा

साढ़े स्पिनरें आस्तै सीएसएस एनीमेशन बनाने लेई बरतेआ जंदा ऐ। में शामिल ऐ scss/_spinners.scss.

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

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