स्पिनरः

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

इस पृष्ठ पर

विषये

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

सुलभतायाः प्रयोजनार्थं, प्रत्येकं लोडरः अत्र समाविष्टं role="status"करोति तथा च एकं nested <span class="visually-hidden">Loading...</span>.

अस्य घटकस्य एनिमेशन-प्रभावः prefers-reduced-motionमीडिया-प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु .

सीमा स्पिनर

लघुभारसूचकस्य कृते सीमास्पिनर्-इत्यस्य उपयोगं कुर्वन्तु ।

html

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

वर्णाः

सीमास्पिनरः currentColorतस्य कृते उपयुज्यते border-color, अर्थात् भवान् पाठवर्णोपयोगिभिः सह वर्णं अनुकूलितुं शक्नोति | मानकस्पिनरे अस्माकं कस्यापि पाठवर्णस्य उपयोगितायाः उपयोगं कर्तुं शक्नुवन्ति ।

html

<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 स्पिनरं प्रति गच्छन्तु । यद्यपि तकनीकीरूपेण न भ्रमति तथापि पुनः पुनः वर्धते!

html

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

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

html

<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

html

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

स्थापनम्

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

नम्

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

लोड हो रहा है...

html

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

प्लवते

html

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

पाठ संरेखित करें

html

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

आकृति

अन्यघटकानाम् अन्तः शीघ्रं उपयोक्तुं शक्यते इति लघुतरं स्पिनरं निर्मातुं .spinner-border-smच योजयन्तु ।.spinner-grow-sm

html

<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 अथवा इनलाइन शैल्याः उपयोगं कुर्वन्तु ।

html

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

बटन्स्

बटन्-अन्तर्गत-स्पिनर्-इत्यस्य उपयोगं कुर्वन्तु यत् सम्प्रति कस्यापि क्रियायाः संसाधनं भवति वा भवति वा इति सूचयितुं । भवन्तः स्पिनर-तत्त्वात् बहिः पाठं स्वैप् अपि कर्तुं शक्नुवन्ति तथा च आवश्यकतानुसारं बटन-पाठस्य उपयोगं कर्तुं शक्नुवन्ति ।

html

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

html

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

CSS इति

चर

v5.2.0 इत्यस्मिन् योजितम्

Bootstrap इत्यस्य विकसितस्य CSS चर-पद्धतेः भागत्वेन, स्पिनर्-जनाः इदानीं वर्धित-वास्तविक-समय-अनुकूलन- उपरि .spinner-borderतथा च कृते स्थानीय-CSS-चर-उपयोगं कुर्वन्ति । .spinner-growCSS चरस्य मूल्यानि Sass मार्गेण सेट् भवन्ति, अतः Sass अनुकूलनं अद्यापि समर्थितम् अस्ति, अपि ।

सीमा स्पिनर चर: 1 .

  --#{$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;

वर्धमान स्पिनर चर : 1 .

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