CSS लोडर जेनरेटर

CSS लोडर जेनरेटर का उपयोग कैसे करें

CSS लोडर जनरेटर शुद्ध CSS में एनिमेटेड लोडिंग स्पिनर बनाता है — कोई इमेज नहीं, कोई JavaScript नहीं, कोई डिपेंडेंसी नहीं। दस स्टाइल में से एक चुनें, साइज़, स्पीड, मोटाई और रंग ट्यून करें, फिर बना हुआ HTML और CSS सीधे अपने प्रोजेक्ट में कॉपी कर लें।

1. चार कंट्रोल से ग्लोबल पैरामीटर सेट करें: Size हर लोडर का बॉक्स तय करता है, Speed एनिमेशन की अवधि बदलता है, Thickness बॉर्डर और बार की चौड़ाई नियंत्रित करता है, और Color हर एलिमेंट को रंगता है।
2. ग्रिड देखें: सभी दस लोडर आपकी मौजूदा सेटिंग्स के साथ लाइव एनिमेट रहते हैं, ताकि आप एक नज़र में तुलना कर सकें। चुनने के लिए किसी भी लोडर पर क्लिक करें।
3. डिटेल पैनल चुने हुए लोडर को बड़ा दिखाता है, साथ में उसका HTML स्निपेट और मैचिंग CSS (जिसमें ज़रूरी @keyframes शामिल हैं) देता है।
4. Copy HTML या Copy CSS दबाकर हर ब्लॉक क्लिपबोर्ड में भेजें। CSS खुद में पूरा है — इसे अपनी स्टाइलशीट में पेस्ट करें और HTML को वहाँ रखें जहाँ लोडर दिखना चाहिए।
5. कोई भी पैरामीटर बदलें और ग्रिड, डिटेल प्रीव्यू और दोनों कोड ब्लॉक तुरंत अपडेट हो जाते हैं।

शुद्ध CSS होने के कारण लोडर लगभग कोई बैंडविड्थ नहीं खर्च करते और किसी भी स्क्रीन पर शार्प रहते हैं। एक्सेसिबिलिटी के लिए एनिमेशन के साथ टेक्स्ट लेबल जोड़ें, और करीब 0.5 सेकंड से कम अवधियाँ टालें — बहुत तेज़ चमकने वाले स्पिनर राहत की जगह बेचैनी देते हैं।