स्पिनर्स

किसी घटक या पृष्ठ की लोडिंग स्थिति को बूटस्ट्रैप स्पिनरों के साथ इंगित करें, जो पूरी तरह से HTML, CSS और बिना जावास्क्रिप्ट के बनाया गया है।

इस पृष्ठ पर

के बारे में

बूटस्ट्रैप "स्पिनर" का उपयोग आपकी परियोजनाओं में लोडिंग स्थिति दिखाने के लिए किया जा सकता है। वे केवल HTML और CSS के साथ बनाए गए हैं, जिसका अर्थ है कि उन्हें बनाने के लिए आपको किसी JavaScript की आवश्यकता नहीं है। हालाँकि, आपको उनकी दृश्यता को टॉगल करने के लिए कुछ कस्टम जावास्क्रिप्ट की आवश्यकता होगी। उनकी उपस्थिति, संरेखण और आकार को हमारे अद्भुत उपयोगिता वर्गों के साथ आसानी से अनुकूलित किया जा सकता है।

अभिगम्यता उद्देश्यों के लिए, यहां प्रत्येक लोडर में 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>

प्लेसमेंट

किसी भी स्थिति में स्पिनरों को ठीक उसी स्थान पर रखने के लिए फ्लेक्सबॉक्स उपयोगिताओं , फ्लोट उपयोगिताओं , या पाठ संरेखण उपयोगिताओं का उपयोग करें ।

मोड़ना

एचटीएमएल

<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-growवास्तविक समय के अनुकूलन को बढ़ाते हैं। CSS वेरिएबल्स के मान 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;

मुख्य-फ़्रेम

हमारे स्पिनरों के लिए 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;
  }
}