स्पिनरहरू
बुटस्ट्र्याप स्पिनरहरू, HTML, CSS, र कुनै जाभास्क्रिप्टको साथ पूर्ण रूपमा निर्मित, कम्पोनेन्ट वा पृष्ठको लोडिङ अवस्था संकेत गर्नुहोस्।
बारे
बुटस्ट्र्याप "स्पिनरहरू" लाई तपाइँको परियोजनाहरूमा लोडिङ अवस्था देखाउन प्रयोग गर्न सकिन्छ। तिनीहरू केवल HTML र CSS मार्फत बनाइएका छन्, यसको मतलब तपाईंले तिनीहरूलाई सिर्जना गर्न कुनै पनि JavaScript आवश्यक पर्दैन। तथापि, तपाइँलाई तिनीहरूको दृश्यता टगल गर्न केहि अनुकूलन JavaScript चाहिन्छ। तिनीहरूको उपस्थिति, पङ्क्तिबद्धता, र साइज सजिलैसँग हाम्रो अद्भुत उपयोगिता कक्षाहरूसँग अनुकूलित गर्न सकिन्छ।
पहुँच उद्देश्यका लागि, यहाँ प्रत्येक लोडरमा समावेश छ 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>
पङ्क्तिबद्धता
बुटस्ट्र्यापमा स्पिनरहरू rem
s currentColor
, र display: inline-flex
. यसको मतलब तिनीहरू सजिलैसँग पुन: आकार, पुन: रंग, र छिटो पङ्क्तिबद्ध गर्न सकिन्छ।
मार्जिन
सजिलो स्पेसिङको लागि मार्जिन उपयोगिताहरू प्रयोग गर्नुहोस् ।.m-5
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
नियुक्ति
फ्लेक्सबक्स उपयोगिताहरू , फ्लोट उपयोगिताहरू , वा पाठ पङ्क्तिबद्ध उपयोगिताहरू प्रयोग गर्नुहोस् स्पिनरहरू ठ्याक्कै जहाँ तपाइँलाई कुनै पनि परिस्थितिमा आवश्यक पर्दछ।
फ्लेक्स
<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;
}
}