بوٽ اسٽريپ اسپنرز سان مڪمل طور تي HTML، CSS، ۽ بغير جاوا اسڪرپٽ سان ٺهيل جزو يا صفحي جي لوڊ ٿيڻ واري حالت کي ظاهر ڪريو.
بابت
بوٽ اسٽراپ ”اسپنرز“ استعمال ڪري سگھجن ٿا توهان جي منصوبن ۾ لوڊشيڊنگ جي حالت ڏيکارڻ لاءِ. اهي صرف HTML ۽ CSS سان ٺهيل آهن، مطلب ته توهان کي انهن کي ٺاهڻ لاءِ ڪنهن جاوا اسڪرپٽ جي ضرورت ناهي. تنهن هوندي به، توهان کي ڪجهه ڪسٽم جاوا اسڪرپٽ جي ضرورت پوندي انهن جي نمائش کي ٽوگل ڪرڻ لاء. انهن جي ظاهري، ترتيب، ۽ سائيز آساني سان ترتيب ڏئي سگهجي ٿي اسان جي شاندار افاديت ڪلاس سان.
رسائي جي مقصدن لاءِ، هتي هر لوڊر ۾ شامل آهي role="status"۽ هڪ nested <span class="sr-only">Loading...</span>.
بارڊر اسپنر currentColorان جي لاءِ استعمال ڪري ٿو border-color، مطلب ته توهان ٽيڪسٽ رنگ جي افاديت سان رنگ کي ترتيب ڏئي سگهو ٿا . توهان معياري اسپنر تي اسان جي ڪنهن به ٽيڪسٽ رنگ جي افاديت استعمال ڪري سگهو ٿا.
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
افاديت ڇو نه استعمال ڪريو border-color؟ هر بارڊر اسپنر transparentگهٽ ۾ گهٽ هڪ پاسي لاءِ سرحد بيان ڪري ٿو، تنهنڪري .border-{color}افاديتون ان کي ختم ڪري ڇڏينديون.
وڌندڙ اسپنر
جيڪڏهن توهان سرحد اسپنر کي پسند نٿا ڪريو، وڌو اسپنر ڏانهن وڃو. جيتوڻيڪ اهو ٽيڪنيڪل طور تي اسپن نٿو ڪري، اهو بار بار وڌندو آهي!
لوڊ ٿي رهيو آهي...
هڪ ڀيرو ٻيهر، هي اسپنر سان ٺهيل آهي currentColor، تنهنڪري توهان آساني سان متن جي رنگ جي افاديت سان ان جي ظاهر کي تبديل ڪري سگهو ٿا . هتي اهو نيري ۾ آهي، سپورٽ ٿيل مختلف قسمن سان گڏ.
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
ترتيب ڏيڻ
بوٽ اسٽراپ ۾ اسپنر rems currentColor، ۽ display: inline-flex. هن جو مطلب آهي ته اهي آساني سان ٻيهر ترتيب ڏئي سگهجن ٿيون، ٻيهر رنگ، ۽ جلدي ترتيب ڏنل.
استعمال ڪريو flexbox utilities , float utilities , or text alignment utilities کي رکڻ لاءِ اسپنرز کي بلڪل ان جاءِ تي جتي توھان کي انھن جي ڪنھن به حالت ۾ ضرورت آھي.
فليڪس
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
ترندو
لوڊ ٿي رهيو آهي...
متن جي ترتيب
لوڊ ٿي رهيو آهي...
ماپ
شامل ڪريو .spinner-border-sm۽ .spinner-grow-smھڪڙو ننڍڙو اسپنر ٺاھيو جيڪو جلدي استعمال ڪري سگھجي ٿو ٻين حصن ۾.
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
يا، ضرورت مطابق طول و عرض تبديل ڪرڻ لاءِ ڪسٽم CSS يا ان لائن اسلوب استعمال ڪريو.
لوڊ ٿي رهيو آهي...
لوڊ ٿي رهيو آهي...
بٽڻ
بٽڻن جي اندر اسپنر استعمال ڪريو ان کي ظاهر ڪرڻ لاءِ ته ڪو عمل في الحال پروسيسنگ يا ٿي رهيو آهي. توھان پڻ متن کي تبديل ڪري سگھوٿا اسپنر عنصر مان ۽ استعمال ڪريو بٽڻ متن جي ضرورت مطابق.