श्रेणी: डेवलपर टूल
CSS लोडिंग स्पिनर जनरेटर
हल्के CSS लोडर स्थानीय रूप से डिज़ाइन करें और कोड कॉपी करें
लाइव पूर्वावलोकन के साथ केवल CSS वाले लोडिंग स्पिनर बनाएँ। आकार, रंग, मोटाई और गति सेट करें, फिर HTML और CSS स्निपेट कॉपी करें। न JavaScript, न छवियाँ।
पूर्वावलोकन
<span class="loader" role="status" aria-label="लोड हो रहा है…"></span>
.loader {
display: inline-block;
box-sizing: border-box;
width: 40px;
height: 40px;
border: 4px solid #dfe4de;
border-top-color: #2f6f4f;
border-radius: 50%;
animation: loader-spin 0.9s linear infinite;
}
@keyframes loader-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.loader,
.loader span {
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
हर स्निपेट केवल transform और opacity को एनिमेट करता है और prefers-reduced-motion ब्लॉक पर खत्म होता है, ताकि जिन लोगों ने अपने सिस्टम से गति कम करने को कहा है, उनके लिए एनिमेशन रुक जाए।
कोई JavaScript नहीं, कोई छवि नहीं, कोई वेब फ़ॉन्ट नहीं — और कुछ भी आपके ब्राउज़र से बाहर नहीं जाता।
इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
लोडिंग संकेतक उन गिनी-चुनी जगहों में से एक है जहाँ CSS की चंद पंक्तियाँ किसी लाइब्रेरी को साफ़-साफ़ मात देती हैं: न कोई स्क्रिप्ट लोड करनी है, न कोई छवि माँगनी है, न उस चीज़ से पहले कुछ आरंभ करना है जिसका आप इंतज़ार कर रहे हैं। ये पाँच टेम्पलेट — रिंग, दोहरी रिंग, बिंदु, पट्टियाँ और पल्स — केवल `transform` और `opacity` को एनिमेट करते हैं, इसलिए ब्राउज़र हर फ़्रेम पर लेआउट दोबारा गिनने के बजाय उन्हें कंपोज़िटर पर चला सकता है। हर स्निपेट `prefers-reduced-motion` ब्लॉक पर खत्म होता है, क्योंकि स्पिनर सजावट है और जिसने अपने सिस्टम से चीज़ों को हिलाना बंद करने को कहा है, उसे उसे देखते बैठना नहीं चाहिए। मार्कअप लेबल सहित `<span role="status">` है, ताकि स्क्रीन रीडर खाली डिब्बा पाने के बजाय प्रतीक्षा की घोषणा करे।
इस्तेमाल कैसे करें
- एक टेम्पलेट चुनें, फिर आकार, मोटाई, गति और रंग सेट करें।
- यदि क्लास नाम आपकी स्टाइलशीट से टकरा सकता हो तो उसे बदल दें।
- HTML और CSS अपने प्रोजेक्ट में कॉपी करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- क्या स्पिनर केवल CSS वाले हैं?
- हाँ। हर एक एक span है (बिंदु और पट्टियों वाले टेम्पलेट में कुछ खाली चाइल्ड span के साथ) और साथ में एक CSS एनिमेशन। न JavaScript, न SVG, न छवि, न वेब फ़ॉन्ट।
- क्या इन्हें चलाने के लिए JavaScript चाहिए?
- नहीं। तत्व के दस्तावेज़ में आते ही एनिमेशन शुरू हो जाता है। कोड सिर्फ़ यह तय करने के लिए चाहिए कि उसे कब दिखाना और कब छिपाना है।
- क्या मैं गति और रंग बदल सकता/सकती हूँ?
- हाँ — आकार, रेखा की मोटाई, एनिमेशन की अवधि, मुख्य रंग और ट्रैक का रंग, सब यहीं नियंत्रण हैं और सीधे उसी स्निपेट में लिखे जाते हैं जिसे आप कॉपी करते हैं।
- जो लोग कम गति पसंद करते हैं उनका क्या?
- हर बना हुआ स्निपेट prefers-reduced-motion मीडिया क्वेरी पर खत्म होता है जो व्यावहारिक रूप से एनिमेशन रोक देती है, इसलिए संकेतक दिखता तो है पर जिन लोगों ने सिस्टम स्तर पर गति घटाई है उनके लिए घूमता नहीं।
- क्या कोड स्थानीय रूप से बनता है?
- हाँ। सेटिंग्स, पूर्वावलोकन और बने हुए स्निपेट आपके ब्राउज़र में ही रहते हैं; कुछ भी अपलोड नहीं होता।