मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
in English

स्पिनरः

Bootstrap spinners इत्यनेन सह घटकस्य अथवा पृष्ठस्य लोडिंग् स्थितिं सूचयन्तु, यत् पूर्णतया HTML, CSS इत्यनेन सह निर्मितम् अस्ति, तथा च JavaScript नास्ति ।

इस पृष्ठ पर

विषये

Bootstrap “spinners” इत्यस्य उपयोगेन भवतः परियोजनासु लोडिंग् स्टेट् दर्शयितुं शक्यते । ते केवलं HTML तथा CSS इत्यनेन निर्मिताः सन्ति, अर्थात् तान् निर्मातुं भवद्भ्यः किमपि जावास्क्रिप्ट् इत्यस्य आवश्यकता नास्ति । तथापि तेषां दृश्यतां टोग्ल् कर्तुं भवद्भ्यः किञ्चित् कस्टम् जावास्क्रिप्ट् आवश्यकं भविष्यति । तेषां रूपं, संरेखणं, आकारनिर्धारणं च अस्माकं आश्चर्यजनक-उपयोगितावर्गैः सह सुलभतया अनुकूलितुं शक्यते ।

सुलभतायाः प्रयोजनार्थं, प्रत्येकं लोडरः अत्र समाविष्टं role="status"करोति तथा च एकं nested <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}उपयोगिताः तत् अधिलिखिष्यन्ति ।

वर्धमान स्पिनर

यदि भवन्तः सीमास्पिनरं न आकर्षयन्ति तर्हि grow स्पिनरं प्रति गच्छन्तु । यद्यपि तकनीकीरूपेण न भ्रमति तथापि पुनः पुनः वर्धते!

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

पुनः, एतत् स्पिनरं , इत्यनेन निर्मितम् अस्ति , अतः भवान् text color utilitiescurrentColor इत्यनेन सहजतया तस्य स्वरूपं परिवर्तयितुं शक्नोति । अत्र समर्थितविविधैः सह नीलवर्णे अस्ति ।

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

संरेखणम्

Bootstrap इत्यस्मिन् स्पिनर् rems, currentColor, तथा च इत्यनेन निर्मिताः भवन्ति display: inline-flex। तेषां आकारः सुलभतया परिवर्तयितुं, पुनः वर्णयितुं, शीघ्रं संरेखितुं च शक्यते इति अर्थः ।

सीमन्

सुलभ-अन्तरालस्य कृते इव मार्जिन-उपयोगितायाः उपयोगं कुर्वन्तु ।.m-5

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

स्थापनम्

flexbox utilities , float utilities , अथवा text alignment utilities इत्यस्य उपयोगं कुर्वन्तु यत् स्पिनर्-इत्येतत् यत्र भवन्तः कस्यापि परिस्थितौ आवश्यकाः सन्ति तत्रैव स्थापयितुं शक्नुवन्ति ।

नम्

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