फिरकीपटू

बूटस्ट्रॅप स्पिनर्ससह घटक किंवा पृष्ठाची लोडिंग स्थिती दर्शवा, पूर्णपणे HTML, CSS आणि कोणत्याही JavaScript सह तयार केलेले.

या पृष्ठावर

बद्दल

बूटस्ट्रॅप "स्पिनर" चा वापर तुमच्या प्रोजेक्ट्समध्ये लोडिंग स्टेट दर्शविण्यासाठी केला जाऊ शकतो. ते फक्त HTML आणि CSS सह तयार केले आहेत, म्हणजे ते तयार करण्यासाठी तुम्हाला कोणत्याही JavaScript ची आवश्यकता नाही. तथापि, त्यांची दृश्यमानता टॉगल करण्यासाठी तुम्हाला काही सानुकूल 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>

सस

चल

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