CSS लोडर जनरेटर - स्पिनर और लोडिंग एनिमेशन ऑनलाइन
रीयल-टाइम प्रीव्यू और कस्टमाइज़ेशन के साथ शुद्ध CSS लोडिंग एनिमेशन बनाएं
<style> .loader { width: 48px; height: 48px; border: calc(48px / 8) solid #93c5fd; border-top-color: #3b82f6; border-radius: 50%; animation: spinnerBorder-spin 1s linear infinite; } @keyframes spinnerBorder-spin { to { transform: rotate(360deg); } } </style> <div class="loader"></div>
अक्सर पूछे जाने वाले प्रश्न
CSS लोडर जेनरेटर क्या है?
CSS लोडर जेनरेटर एक ऑनलाइन टूल है जो डेवलपर्स को CSS कीफ्रेम एनिमेशन को शुरू से लिखे बिना शुद्ध CSS लोडिंग एनिमेशन (स्पिनर, प्रगति संकेतक, डॉट्स, बार, पल्स आदि) बनाने में मदद करता है। लोडिंग इंडिकेटर आवश्यक UI घटक हैं जो सामग्री प्राप्त, संसाधित या लोड होने पर दृश्य प्रतिक्रिया प्रदान करते हैं। यह टूल पूर्व-निर्मित लोडर डिज़ाइन की एक गैलरी प्रदान करता है जिन्हें रंग, आकार और एनिमेशन गति में अनुकूलित किया जा सकता है, फिर उत्पादन उपयोग के लिए तैयार स्वच्छ, कॉपी करने योग्य HTML और CSS कोड के रूप में निर्यात किया जा सकता है।
मैं इस CSS लोडर जेनरेटर का उपयोग कैसे करूं?
1. लोडर गैलरी ब्राउज़ करें और अपने डिज़ाइन के अनुकूल लोडर स्टाइल (स्पिनर, डॉट्स, बार, पल्स, रिंग या विविध स्टाइल) पर क्लिक करें। 2. प्रकार के अनुसार लोडर फ़िल्टर करने के लिए श्रेणी टैब का उपयोग करें। 3. कलर पिकर का उपयोग करके प्राथमिक रंग को अनुकूलित करें। 4. आकार स्लाइडर (16-96px) और गति स्लाइडर (0.3-3.0s) को समायोजित करें। 5. पूर्वावलोकन पृष्ठभूमि को हल्के और गहरे के बीच टॉगल करें। 6. अपना आउटपुट प्रारूप (HTML, CSS या संयुक्त) चुनें और कॉपी पर क्लिक करें।
क्या मेरा डेटा सुरक्षित है? क्या कुछ सर्वर पर भेजा जाता है?
हां, आपका डेटा पूरी तरह सुरक्षित है। यह टूल क्लाइंट-साइड JavaScript और CSS का उपयोग करके पूरी तरह से आपके ब्राउज़र में चलता है। कोई भी कॉन्फ़िगरेशन, रंग मान या कोड आउटपुट किसी भी सर्वर पर नहीं भेजा जाता है। लोडर एनिमेशन शुद्ध CSS का उपयोग करके सीधे आपके ब्राउज़र में रेंडर होते हैं। एक बार लोड होने के बाद यह टूल ऑफ़लाइन काम करता है।
GIF, SVG या JavaScript एनिमेशन के बजाय शुद्ध CSS लोडर का उपयोग क्यों करें?
शुद्ध CSS लोडर कई फायदे प्रदान करते हैं: (1) प्रदर्शन — CSS एनिमेशन GPU द्वारा हार्डवेयर-त्वरित होते हैं, जिसके परिणामस्वरूप 60fps पर सहज एनिमेशन होते हैं। (2) स्केलेबिलिटी — CSS लोडर बिना पिक्सेलेशन के किसी भी आकार में पूरी तरह से स्केल होते हैं। (3) फ़ाइल आकार — CSS लोडर GIF फ़ाइलों (प्रत्येक 10-50KB) की तुलना में वस्तुतः शून्य बाइट जोड़ते हैं। (4) अनुकूलन — रंग, आकार और गति को CSS गुणों के माध्यम से तुरंत बदला जा सकता है। (5) कोई निर्भरता नहीं — कोई JavaScript लाइब्रेरी या छवि फ़ाइलों की आवश्यकता नहीं। (6) एक्सेसिबिलिटी — CSS एनिमेशन prefers-reduced-motion मीडिया क्वेरी का जवाब देते हैं।
CSS लोडिंग एनिमेशन तकनीकी रूप से कैसे काम करते हैं?
CSS लोडिंग एनिमेशन कई CSS सुविधाओं को जोड़ते हैं: @keyframes नियम एनिमेशन अनुक्रम को परिभाषित करते हैं (जैसे, रोटेशन, स्केलिंग, अपारदर्शिता संक्रमण)। animation शॉर्टहैंड प्रॉपर्टी अवधि, टाइमिंग फ़ंक्शन और पुनरावृत्ति गणना के साथ कीफ्रेम लागू करती है। छद्म-तत्व (::before, ::after) एकल HTML तत्व से बहु-भाग एनिमेशन की अनुमति देते हैं। CSS transform गुण (rotate, scale, translate) GPU कंपोज़िटिंग के माध्यम से दृश्य परिवर्तनों को कुशलतापूर्वक संभालते हैं। animation-delay कई तत्वों में क्रमिक प्रभाव बनाता है।
क्या कॉपी करने के बाद जेनरेट किए गए लोडर CSS को अनुकूलित किया जा सकता है?
हां, जेनरेट किया गया CSS मानक, अच्छी तरह से फ़ॉर्मेट किया गया कोड है जिसे आप स्वतंत्र रूप से संशोधित कर सकते हैं। यदि आप CSS वेरिएबल्स आउटपुट मोड का उपयोग करते हैं, तो आप :root कस्टम प्रॉपर्टी मानों को अपडेट करके बस रंग, आकार और गति बदल सकते हैं — यह थीमिंग के लिए विशेष रूप से उपयोगी है। आप .loader क्लास का नाम भी बदल सकते हैं, animation-timing-function को समायोजित कर सकते हैं, या कीफ्रेम प्रतिशत को संशोधित कर सकते हैं।
CSS लोडर को एक्सेसिबल कैसे बनाएं?
CSS लोडर को एक्सेसिबल बनाने के लिए: (1) लोडर तत्व में role="status" और aria-label="Loading" जोड़ें। (2) लोडर के अंदर <span class="sr-only">Loading...</span> जैसा दृश्य रूप से छिपा हुआ टेक्स्ट शामिल करें। (3) @media (prefers-reduced-motion: reduce) { .loader { animation: none; } } जोड़कर prefers-reduced-motion का सम्मान करें। (4) लोडर और पृष्ठभूमि के बीच पर्याप्त रंग कंट्रास्ट सुनिश्चित करें।
कोड उदाहरण
// CSS Loader Generator - JavaScript Implementation
const LOADERS = {
spinnerBorder: {
name: 'Border Spinner',
category: 'spinner',
html: '<div class="loader"></div>',
css: (color, size, speed) => `
.loader {
width: ${size}px;
height: ${size}px;
border: ${Math.round(size / 8)}px solid #f3f3f3;
border-top: ${Math.round(size / 8)}px solid ${color};
border-radius: 50%;
animation: loader-spin ${speed}s linear infinite;
}
@keyframes loader-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}`,
},
bouncingDots: {
name: 'Bouncing Dots',
category: 'dots',
html: '<div class="loader"><span></span><span></span><span></span></div>',
css: (color, size, speed) => `
.loader {
display: flex;
gap: ${Math.round(size / 6)}px;
align-items: center;
}
.loader span {
width: ${Math.round(size / 4)}px;
height: ${Math.round(size / 4)}px;
background-color: ${color};
border-radius: 50%;
animation: loader-bounce ${speed}s ease-in-out infinite;
}
.loader span:nth-child(2) {
animation-delay: ${(-speed / 3).toFixed(2)}s;
}
.loader span:nth-child(3) {
animation-delay: ${(-speed / 6).toFixed(2)}s;
}
@keyframes loader-bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}`,
},
};
function generateLoader(loaderId, options = {}) {
const { color = '#3b82f6', size = 48, speed = 1.0 } = options;
const loader = LOADERS[loaderId];
if (!loader) throw new Error(`Unknown loader: ${loaderId}`);
return {
html: loader.html,
css: loader.css(color, size, speed).trim(),
};
}
// Usage
const result = generateLoader('spinnerBorder', {
color: '#ef4444', size: 64, speed: 0.8
});
console.log('HTML:', result.html);
console.log('CSS:', result.css);