स्पिनर करपी

घटक वा पानाची लोडिंग स्थिती बूटस्ट्रॅप स्पिनरां सयत दाखोवची, पुरायपणान 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 उपयुक्तताय , float उपयुक्तताय , वा मजकूर संरेखण उपयुक्तताय वापरात .

जंव

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