बुटस्ट्र्याप स्पिनरहरू, HTML, CSS, र कुनै जाभास्क्रिप्टको साथ पूर्ण रूपमा निर्मित, कम्पोनेन्ट वा पृष्ठको लोडिङ अवस्था संकेत गर्नुहोस्।
बारे
बुटस्ट्र्याप "स्पिनरहरू" लाई तपाइँको परियोजनाहरूमा लोडिङ अवस्था देखाउन प्रयोग गर्न सकिन्छ। तिनीहरू केवल HTML र CSS मार्फत बनाइएका छन्, यसको मतलब तपाईंले तिनीहरूलाई सिर्जना गर्न कुनै पनि JavaScript आवश्यक पर्दैन। तथापि, तपाइँलाई तिनीहरूको दृश्यता टगल गर्न केहि अनुकूलन JavaScript चाहिन्छ। तिनीहरूको उपस्थिति, पङ्क्तिबद्धता, र साइज सजिलैसँग हाम्रो अद्भुत उपयोगिता कक्षाहरूसँग अनुकूलित गर्न सकिन्छ।
पहुँच उद्देश्यका लागि, यहाँ प्रत्येक लोडरमा समावेश छ role="status"र एउटा नेस्टेड <span class="sr-only">Loading...</span>।
सीमा स्पिनर
हल्का लोडिङ सूचकको लागि बोर्डर स्पिनरहरू प्रयोग गर्नुहोस्।
लोड हुँदै...
रंगहरू
बोर्डर स्पिनर currentColorयसको लागि प्रयोग गर्दछ border-color, जसको मतलब तपाइँ पाठ रङ उपयोगिताहरु संग रङ अनुकूलन गर्न सक्नुहुन्छ । तपाईंले मानक स्पिनरमा हाम्रा कुनै पनि पाठ रङ उपयोगिताहरू प्रयोग गर्न सक्नुहुन्छ।
लोड हुँदै...
लोड हुँदै...
लोड हुँदै...
लोड हुँदै...
लोड हुँदै...
लोड हुँदै...
लोड हुँदै...
लोड हुँदै...
किन border-colorउपयोगिताहरू प्रयोग नगर्ने? प्रत्येक बोर्डर स्पिनरले transparentकम्तिमा एक पक्षको लागि सीमा निर्दिष्ट गर्दछ, त्यसैले .border-{color}उपयोगिताहरूले त्यसलाई ओभरराइड गर्नेछ।
बढ्दो स्पिनर
यदि तपाइँ बोर्डर स्पिनर फेन्सी गर्नुहुन्न भने, ग्रो स्पिनरमा स्विच गर्नुहोस्। जबकि यो प्राविधिक रूपमा स्पिन गर्दैन, यो बारम्बार बढ्छ!
लोड हुँदै...
एक पटक फेरि, यो स्पिनर बाट बनाइएको छ currentColor, त्यसैले तपाइँ सजिलै पाठ रङ उपयोगिताहरु संग यसको उपस्थिति परिवर्तन गर्न सक्नुहुन्छ । यहाँ यो समर्थित भेरियन्टहरू सहित नीलोमा छ।
लोड हुँदै...
लोड हुँदै...
लोड हुँदै...
लोड हुँदै...
लोड हुँदै...
लोड हुँदै...
लोड हुँदै...
लोड हुँदै...
पङ्क्तिबद्धता
बुटस्ट्र्यापमा स्पिनरहरू rems currentColor, र display: inline-flex. यसको मतलब तिनीहरू सजिलैसँग पुन: आकार, पुन: रंग, र छिटो पङ्क्तिबद्ध गर्न सकिन्छ।
थप्नुहोस् .spinner-border-smर .spinner-grow-smएउटा सानो स्पिनर बनाउनको लागि जुन अन्य कम्पोनेन्टहरूमा छिट्टै प्रयोग गर्न सकिन्छ।
लोड हुँदै...
लोड हुँदै...
वा, आवश्यकता अनुसार आयामहरू परिवर्तन गर्न अनुकूलन CSS वा इनलाइन शैलीहरू प्रयोग गर्नुहोस्।
लोड हुँदै...
लोड हुँदै...
बटनहरू
बटन भित्र स्पिनरहरू प्रयोग गर्नुहोस् कुनै कार्य हाल प्रशोधन भइरहेको छ वा भइरहेको छ भनेर संकेत गर्न। तपाईंले स्पिनर तत्वबाट पाठलाई स्वैप गर्न सक्नुहुन्छ र आवश्यकता अनुसार बटन पाठ प्रयोग गर्न सक्नुहुन्छ।