स्पिनरः
Bootstrap spinners इत्यनेन सह घटकस्य अथवा पृष्ठस्य लोडिंग् स्थितिं सूचयन्तु, यत् पूर्णतया HTML, CSS इत्यनेन सह निर्मितम् अस्ति, तथा च JavaScript नास्ति ।
विषये
Bootstrap “spinners” इत्यस्य उपयोगेन भवतः परियोजनासु लोडिंग् स्टेट् दर्शयितुं शक्यते । ते केवलं HTML तथा CSS इत्यनेन निर्मिताः सन्ति, अर्थात् तान् निर्मातुं भवद्भ्यः किमपि जावास्क्रिप्ट् इत्यस्य आवश्यकता नास्ति । तथापि तेषां दृश्यतां टोग्ल् कर्तुं भवद्भ्यः किञ्चित् कस्टम् जावास्क्रिप्ट् आवश्यकं भविष्यति । तेषां रूपं, संरेखणं, आकारनिर्धारणं च अस्माकं आश्चर्यजनक-उपयोगितावर्गैः सह सुलभतया अनुकूलितुं शक्यते ।
सुलभतायाः प्रयोजनार्थं, प्रत्येकं लोडरः अत्र समाविष्टं role="status"
करोति तथा च एकं nested <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
मीडिया-प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु
.
सीमा स्पिनर
लघुभारसूचकस्य कृते सीमास्पिनर्-इत्यस्य उपयोगं कुर्वन्तु ।
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
वर्णाः
सीमास्पिनरः currentColor
तस्य कृते उपयुज्यते border-color
, अर्थात् भवान् पाठवर्णोपयोगिभिः सह वर्णं अनुकूलितुं शक्नोति | मानकस्पिनरे अस्माकं कस्यापि पाठवर्णस्य उपयोगितायाः उपयोगं कर्तुं शक्नुवन्ति ।
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
border-color
उपयोगितानां उपयोगः किमर्थं न भवति ? प्रत्येकं सीमास्पिनरः
transparent
न्यूनातिन्यूनम् एकस्य पक्षस्य कृते सीमां निर्दिशति, अतः
.border-{color}
उपयोगिताः तत् अधिलिखिष्यन्ति ।
वर्धमान स्पिनर
यदि भवन्तः सीमास्पिनरं न आकर्षयन्ति तर्हि grow स्पिनरं प्रति गच्छन्तु । यद्यपि तकनीकीरूपेण न भ्रमति तथापि पुनः पुनः वर्धते!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
पुनः, एतत् स्पिनरं , इत्यनेन निर्मितम् अस्ति , अतः भवान् text color utilitiescurrentColor
इत्यनेन सहजतया तस्य स्वरूपं परिवर्तयितुं शक्नोति । अत्र समर्थितविविधैः सह नीलवर्णे अस्ति ।
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
संरेखणम्
Bootstrap इत्यस्मिन् स्पिनर् rem
s, currentColor
, तथा च इत्यनेन निर्मिताः भवन्ति display: inline-flex
। तेषां आकारः सुलभतया परिवर्तयितुं, पुनः वर्णयितुं, शीघ्रं संरेखितुं च शक्यते इति अर्थः ।
सीमन्
सुलभ-अन्तरालस्य कृते इव मार्जिन-उपयोगितायाः उपयोगं कुर्वन्तु ।.m-5
<div class="spinner-border m-5" role="status">
<span class="sr-only">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="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
प्लवते
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
पाठ संरेखित करें
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
आकृति
अन्यघटकानाम् अन्तः शीघ्रं उपयोक्तुं शक्यते इति लघुतरं स्पिनरं निर्मातुं .spinner-border-sm
च योजयन्तु ।.spinner-grow-sm
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
अथवा, आवश्यकतानुसारं आयामान् परिवर्तयितुं कस्टम् CSS अथवा इनलाइन शैल्याः उपयोगं कुर्वन्तु ।
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">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="sr-only">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="sr-only">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>