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>

प्लेसमेंट

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

मोड़ना

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

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

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