CSS लोडर / स्पिनर जनरेटर

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

लोडर की शैली

रंग

आकार: 48px

गति: 1s

HTML + CSS कोड

<style>
.byteryo-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #4f46e533;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: byteryo-spin 1s linear infinite;
}

@keyframes byteryo-spin {
  to { transform: rotate(360deg); }
}
</style>

<div class="byteryo-spinner"></div>

यह कैसे काम करता है

शुद्ध CSS में बना एनिमेटेड लोडर GIF से कहीं ज़्यादा हल्का होता है और आपके इंटरफ़ेस के रंग व थीम के अनुसार अपने आप ढल जाता है। यहाँ दी गई हर शैली एक अलग CSS एनिमेशन (@keyframes) पर आधारित है: सर्कल के लिए लगातार घूमना, डॉट्स और बार के लिए कई एलिमेंट के बीच समय का अंतर, और पल्स के लिए स्केल व ओपैसिटी में बदलाव।

क्या जनरेट किया गया कोड JavaScript के बिना काम करता है?

हाँ, एनिमेशन पूरी तरह @keyframes के ज़रिए CSS से चलता है: बस <style> ब्लॉक और उससे जुड़ा HTML अपने पेज में कॉपी करें, लोडर चलाने के लिए किसी स्क्रिप्ट की ज़रूरत नहीं है।

लोडर को सिर्फ़ लोडिंग के दौरान कैसे दिखाएँ?

जब कोई रिक्वेस्ट या प्रोसेसिंग चल रही हो, तब अपने सामान्य JavaScript फ़्रेमवर्क से लोडर का HTML ब्लॉक जोड़ें या हटाएँ (या display: none वाली क्लास बदलें), और कंटेंट तैयार होते ही उसे छिपा दें।

कोड आपकी सेटिंग्स से आपके ब्राउज़र में तुरंत जनरेट होता है, किसी सर्वर से कनेक्शन के बिना।