मुख्य सामग्री पर जाएँ 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;
  }
}