CSS लोडर जनरेटर

CSS लोडर जनरेटर क्या है?

CSS लोडर जनरेटर वेब डिज़ाइनरों और फ्रंट-एंड डेवलपरों के लिए एक मुफ़्त इन-ब्राउज़र टूल है जिन्हें बिना लाइब्रेरी जोड़े शुद्ध CSS लोडिंग संकेतक चाहिए। पाँच शैलियों - स्पिनर, रिंग, डॉट्स, बार और पल्स - में से चुनें, फिर पिक्सेल में आकार, मुख्य रंग, एक एनिमेशन चक्र की गति सेकंड में, स्ट्रोक की मोटाई, और डॉट्स या बार की संख्या को नियंत्रित करें। संपादन करते समय एक लाइव प्रीव्यू एनिमेट होता है, और संबंधित HTML मार्कअप के साथ @keyframes वाला CSS स्टाइल ब्लॉक तुरंत अपडेट होता है ताकि आप इसे सीधे किसी पेज में डाल सकें। इसका उपयोग बटन, पेज लोडर, स्केलेटन स्थितियों और एसिंक प्लेसहोल्डर के लिए करें, या यह सीखने के लिए कि CSS एनिमेशन और @keyframes हर प्रभाव को कैसे चलाते हैं।

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

1. एक लोडर शैली चुनें: स्पिनर, रिंग, डॉट्स, बार, या पल्स।
2. पिक्सेल में आकार सेट करें और स्वैच से या कोई मान टाइप करके रंग चुनें।
3. एक पूर्ण चक्र के लिए एनिमेशन गति सेकंड में सेट करें।
4. स्ट्रोक की मोटाई (स्पिनर और रिंग) या डॉट्स या बार की संख्या समायोजित करने के लिए सेटिंग्स खोलें।
5. लाइव प्रीव्यू को एनिमेट होते देखें, फिर कॉपी बटन से बने हुए HTML और CSS को कॉपी करें।

उदाहरण

शैली: स्पिनर, आकार 48px, रंग #4f86f7, गति 1s, मोटाई 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

शैली: डॉट्स, आकार 48px, रंग #9333ea, गति 1s, संख्या 3

<div class="dd-loader"><div></div><div></div><div></div></div> प्रत्येक डॉट पर क्रमिक animation-delay के साथ ताकि डॉट्स लहर की तरह छोटे-बड़े हों।

अक्सर पूछे जाने वाले सवाल

कौन-सी लोडर शैलियाँ उपलब्ध हैं?

पाँच: स्पिनर (घूमता हुआ चाप), रिंग (एक मोटा घूमता हुआ छल्ला), डॉट्स (लहर की तरह छोटे-बड़े होते बिंदु), बार (ऊपर-नीचे खिंचते दंड), और पल्स (एक अकेला स्पंदित वृत्त)। शैली मेनू से बदलें और प्रीव्यू तथा कोड तुरंत अपडेट हो जाते हैं।

आकार, रंग और गति नियंत्रण क्या करते हैं?

आकार लोडर के पिक्सेल आयाम सेट करता है, रंग मुख्य रंग सेट करता है (स्वैच पिकर का उपयोग करें या कोई भी CSS रंग टाइप करें), और गति एक एनिमेशन चक्र की अवधि सेकंड में है। मोटाई स्पिनर और रिंग के स्ट्रोक को नियंत्रित करती है, जबकि संख्या यह नियंत्रित करती है कि कितने डॉट्स या बार दिखें।

क्या बना हुआ CSS बिना JavaScript के शुद्ध CSS है?

हाँ। स्निपेट सादा HTML के साथ एक <style> ब्लॉक है जो CSS एनिमेशन और @keyframes का उपयोग करता है, इसलिए यह बिना किसी JavaScript या बाहरी लाइब्रेरी के चलता है। इसे अपने पेज में पेस्ट करें और यह अपने आप काम करता है।

मोटाई और संख्या हर शैली को क्यों नहीं बदलतीं?

मोटाई केवल स्पिनर और रिंग को प्रभावित करती है (जो एक बॉर्डर खींचते हैं), जबकि संख्या केवल डॉट्स और बार को प्रभावित करती है (जो कई तत्व रेंडर करते हैं)। अन्य शैलियाँ इन्हें अनदेखा करती हैं, इसलिए आपकी चुनी हुई शैली के लिए आउटपुट साफ़ रहता है।

क्या कुछ भी किसी सर्वर पर अपलोड होता है?

नहीं। लोडर और इसका CSS पूरी तरह आपके ब्राउज़र में स्थानीय स्ट्रिंग गणना से बनता है - कोई सेटिंग, रंग या कोड कभी किसी सर्वर पर नहीं भेजा जाता, इसलिए यह ऑफ़लाइन काम करता है और आपका काम निजी रखता है।