स्पिनर करपी

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

सीएसएस हें नांव

चड-उणें

v5.2.0 त जोडलां

Bootstrap च्या विकसीत जावपी CSS चड-उणें पद्दतीचो एक भाग म्हूण, स्पिनर आतां थळाव्या CSS चड -उणें वाडयल्ल्या रियल-टायम पसंतीचेर आनी ताचे खातीर .spinner-borderवापरतात . .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;

दोनूय स्पिनरांखातीर, गरज पडल्यार ह्या CSS चयापचयाचीं मोलां अद्ययावत करपाखातीर ल्हान स्पिनर संशोधक वर्ग वापरतात. देखीक, .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;
  }
}