CSS लोडर जनरेटर
CSS Loader Generator छह स्टाइल — spinner, bouncing dots, ring, pulse, bars और dual ring — में pure CSS loading animations बनाता है, जिनका size, color, speed और thickness बदला जा सकता है, और CSS व HTML दोनों देता है।
इस टूल के बारे में
CSS Loader Generator छह स्टाइल — spinner, bouncing dots, ring, pulse, bars और dual ring — में pure CSS loading animations बनाता है, जिनका size, color, speed और thickness बदला जा सकता है, और CSS व HTML दोनों देता है।
इस्तेमाल कैसे करें
- कोई loader स्टाइल चुनें।
- size, color, speed और thickness एडजस्ट करें।
- लाइव प्रीव्यू देखें।
- Copy CSS + HTML पर क्लिक करें और दोनों को अपने पेज में पेस्ट करें।
जानने योग्य बातें
- pure CSS loaders को किसी इमेज, GIF या JavaScript की ज़रूरत नहीं होती।
- spinners @keyframes और transform: rotate() से घूमते हैं, जिसे animate करना कुशल है।
- markup एक अकेला element है, या dots और bars के लिए कुछ child elements।
- role="status" और “Loading…” जैसा visually hidden label जोड़ें, ताकि screen readers loader की घोषणा करें।
- prefers-reduced-motion में loaders को धीमा करने या रोकने पर विचार करें।
पूरी तरह आपके ब्राउज़र में चलता है — आप जो भी डालते हैं, वह न अपलोड होता है न सेव।
अक्सर पूछे जाने वाले सवाल
CSS में loading spinner कैसे बनाएं?
square element को ऐसा border दें जिसकी एक तरफ़ रंगीन हो, border-radius: 50% और घूमने वाली @keyframes animation दें — या इस generator से एक कॉपी कर लें।
क्या CSS loaders GIFs से बेहतर हैं?
आमतौर पर हाँ: ये छोटे होते हैं, हर साइज़ में साफ़ दिखते हैं, और इनका रंग व speed CSS से बदला जा सकता है।
loader को accessible कैसे बनाएं?
इसे role="status" वाले element में रखें और “Loading…” जैसा छिपा हुआ टेक्स्ट शामिल करें, ताकि assistive technology इसकी घोषणा कर सके।
loader को पेज के बीच में कैसे रखें?
इसे display: flex; justify-content: center; align-items: center; वाले container में रखें।