CSS लोडिंग एनिमेशन जनरेटर

CSS Loader Generator

264 लोडर टेम्पलेट: 24 आकृतियाँ × 11 गतियाँ; श्रेणी छानें और एनीमेशन जाँचें।

लोकल प्रोसेसिंग

बग रिपोर्ट करें

मोशन सिस्टम

CSS लोडिंग एनिमेशन जनरेटर

कंट्रोल्ड मोशन के साथ प्रोडक्शन-रेडी रिंग या थ्री-डॉट लोडिंग इंडिकेटर बनाएँ।

टेम्पलेट · 264

श्रेणी, आकृति और गति चुनें। हर टेम्पलेट आकार या उसकी गति बदलता है।

श्रेणी

1 / 22

लाइव प्रीव्यू

CSS एक्सपोर्ट करने से पहले कंट्रोल एडजस्ट करके इफ़ेक्ट जाँचें।

मान्य CSS

03 / CSS.loader

337 B · लाइव

.loader {
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  border: 6px solid #dfe3ea;
  border-top-color: #0f4cff;
  border-radius: 50%;
  animation: toolars-spin 0.9s linear infinite;
}

@keyframes toolars-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; }
}

टास्क पथ / इनपुट से परिणाम तक

CSS लोडर कैसे डिज़ाइन करें

01
लोडर की शैली चुनें
ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: लोडर शैली खोलें और क्लासिक घूमती रिंग के लिए ऑर्बिट रिंग चुनें या उछलते बिंदु-त्रिक के लिए तीन बिंदु। लाइव पूर्वावलोकन आपके हर बदलाव के साथ एनिमेट होता है, और एक्सपोर्ट करने पर हर शैली अपना @keyframes साथ लाती है। 264 टेम्पलेट · 24 आकृति × 11 गति · श्रेणी · रंग
02
फ्रेम और स्ट्रोक का आकार तय करें
24–160 px का फ्रेम और 2–20 px का स्ट्रोक या बिंदु इस्तेमाल करें। रिंग का स्ट्रोक फ्रेम के आधे से कम होना चाहिए। तीन बिंदु एक-दूसरे से कम से कम 2 px की दूरी पर फिट होने चाहिए; वरना कॉपी और डाउनलोड बंद रहेंगे। रिंग के एक्सपोर्ट किए गए आयामों में उसका बॉर्डर भी शामिल है।
03
गति और रंग समायोजित करें
ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: चक्र अवधि 0.2 से 4 सेकंड के बीच 0.05 s के चरणों में चुनें। सक्रिय रंग रिंग के ऊपरी बॉर्डर या बीच वाले बिंदु पर लागू होता है; ट्रैक रंग बाकी रिंग या दोनों बाहरी बिंदुओं पर लागू होता है। धीमे चक्र शांत बैकग्राउंड काम जैसे लगते हैं; तेज़ चक्र जल्दबाज़ी का एहसास देते हैं।
04
या नमूने से शुरुआत करें
ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: नमूना लोड करें दबाकर एक दमदार तीन बिंदु प्रीसेट लागू करें — 72 px फ्रेम, 12 px बिंदु और लाल-पीले रंग में 0.75 s चक्र — शुरुआती बिंदु के तौर पर। रीसेट हमेशा डिफ़ॉल्ट ऑर्बिट रिंग पर वापस लाता है।
05
CSS कॉपी या डाउनलोड करें
रूलसेट को क्लिपबोर्ड पर रखने के लिए CSS कॉपी करें दबाएं, या toolars-loader.css सहेजने के लिए .css डाउनलोड करें। आउटपुट पैनल ठीक वही बाइट्स दिखाता है जो आप एक्सपोर्ट कर रहे हैं, और जब तक कोई मान वैलिडेशन पास नहीं करता, दोनों बटन बंद रहते हैं।
06
इसे अपने मार्कअप में जोड़ें
ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: ऑर्बिट रिंग को .loader क्लास वाले एक ही एलिमेंट की ज़रूरत है; तीन बिंदु उसके अंदर तीन span चाइल्ड चाहता है। एक्सपोर्ट में एक prefers-reduced-motion ब्लॉक शामिल है जो मोशन-संवेदनशील विज़िटर के लिए एनिमेशन रोक देता है। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।

टूल के तथ्य

प्रोसेसिंग: आपके ब्राउज़र में
इनपुट इस डिवाइस से बाहर जाता है: कभी नहीं
रिटेंशन: कुछ भी स्टोर नहीं होता
कीमत: मुफ़्त

आपका इनपुट ब्राउज़र में ही रहता है।

CSS लोडिंग एनिमेशन जनरेटर अपना सत्यापित लोकल एक्ज़ीक्यूशन पथ इस्तेमाल करता है और कोई छिपा इनपुट या आउटपुट इतिहास नहीं बनाता।

लोकल एक्ज़ीक्यूशन

मौजूदा ब्राउज़र टैब के अंदर चलता है।

कोई छिपी प्रोसेसिंग नहीं

सक्रिय टूल डेटा कभी Toolars दस्तावेज़ रिकॉर्ड नहीं बनता।

खाते की ज़रूरत नहीं

बिना प्रोफ़ाइल बनाए मुख्य वर्कफ़्लो इस्तेमाल करें। साइन इन करने के बाद फ़ेवरिट आपके खाते से सिंक होते हैं।

तुरंत रीसेट

टैब साफ़ करें और सक्रिय कार्य डेटा गायब।

CSS लोडिंग एनिमेशन जनरेटर कब उपयोगी होता है

नारंगी ऑर्बिट रिंग बनाएँ

24-09-2026 के स्थानीय ब्राउज़र परीक्षण में ऑर्बिट रिंग, 64 px फ्रेम, 8 px स्ट्रोक, 1.2 s चक्र, सक्रिय रंग #ff6600 और ट्रैक रंग #dfe3ea चुना गया। पूर्वावलोकन वैध रहा। निर्यात किए गए .loader CSS में 64px चौड़ाई और ऊँचाई, 8px #dfe3ea बॉर्डर, नारंगी ऊपरी बॉर्डर और toolars-spin 1.2s linear infinite मिला।

तीन बिंदुओं का नमूना निर्यात करें

नमूना लोड करें दबाने पर 72 px फ्रेम, 12 px बिंदु और 0.75 s चक्र के साथ तीन बिंदु मिलते हैं: बीच में #f21a10 और बाहर #ffd11a। CSS में 18px gap और -0.25s तथा -0.5s विलंब हैं। स्थानीय परीक्षण में कॉपी और डाउनलोड की गई toolars-loader.css के सभी 695 UTF-8 बाइट समान थे।

फ्रेम में न समाने वाले बिंदु ठीक करें

तीन बिंदुओं के नमूने में बिंदु 12 px रखकर फ्रेम 24 px करें। पूर्वावलोकन CHECK VALUES दिखाता है और बताता है कि बिंदु तथा उनके बीच की जगह फ्रेम में समानी चाहिए। CSS खाली हो जाता है और कॉपी तथा डाउनलोड बंद हो जाते हैं। फ्रेम 72 px करने पर 695-बाइट CSS और दोनों क्रियाएँ लौट आती हैं।

CSS लोडिंग एनिमेशन जनरेटर असल में क्या करता है

हर कुछ सेकंड में रीफ्रेश होने वाले डैशबोर्ड को ब्रांड पैलेट वाला स्पिनर चाहिए; चेकआउट बटन को पेमेंट की पुष्टि होते समय व्यस्त स्थिति चाहिए; प्रोटोटाइप ब्राउज़र के डिफ़ॉल्ट से बेहतर का हकदार है। फ्रेम, स्ट्रोक और ताल को विज़ुअली तय करने का मतलब है कि स्टाइलशीट में एक भी लाइन जाने से पहले ही लोडर सही है — और क्योंकि जनरेटर पूरी तरह इसी टैब में चलता है, किसी अनरिलीज़्ड प्रोडक्ट के रंग और नाम मशीन से बाहर नहीं जाते। मोशन सही लगते ही एक्सपोर्ट बस एक क्लिक है।

आम सवाल

बना हुआ CSS किस HTML की उम्मीद करता है?

ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: ऑर्बिट रिंग .loader क्लास वाले एक ही एलिमेंट के साथ काम करती है। तीन बिंदु .loader के अंदर तीन span चाइल्ड चाहता है; स्टाइलशीट उनके एनिमेशन डिले अपने आप सीढ़ीनुमा लगा देती है, इसलिए मार्कअप साधारण रहता है और कोई अतिरिक्त क्लास नहीं चाहिए। 264 लोडर टेम्पलेट: 24 आकृतियाँ × 11 गतियाँ; श्रेणी छानें और एनीमेशन जाँचें। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।

पूर्वावलोकन में मान जांचें क्यों लिखा है?

24–160 px का फ्रेम और 2–20 px का स्ट्रोक या बिंदु इस्तेमाल करें। रिंग का स्ट्रोक फ्रेम के आधे से कम होना चाहिए। तीन बिंदु एक-दूसरे से कम से कम 2 px की दूरी पर फिट होने चाहिए; वरना कॉपी और डाउनलोड बंद रहेंगे। रिंग के एक्सपोर्ट किए गए आयामों में उसका बॉर्डर भी शामिल है।

तीनों बिंदु तालमेल में कैसे रहते हैं?

ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: कोरियोग्राफ़ी स्टाइलशीट संभालती है: बीच वाला span सक्रिय रंग लेता है, और दूसरे व तीसरे span को चक्र के एक-तिहाई और दो-तिहाई के निगेटिव एनिमेशन डिले मिलते हैं, इसलिए उछाल पूरे लूप में समान रूप से बिखरती है।

क्या लोडर reduced-motion सेटिंग्स का सम्मान करता है?

हां। हर एक्सपोर्ट prefers-reduced-motion के लिए एक मीडिया क्वेरी के साथ खत्म होता है जो एनिमेशन बंद कर देती है — बिंदु वाला वेरिएंट एक स्थिर ओपेसिटी पर भी ठहर जाता है — इसलिए कम मोशन मांगने वाले विज़िटर को घूमते संकेतक की जगह शांत, स्थिर संकेतक मिलता है।

क्या मैं लोडर को अपने प्रोजेक्ट में पेस्ट करने के बाद समायोजित कर सकता/सकती हूँ?

बिल्कुल; आउटपुट पढ़ने लायक मानों वाला सादा CSS है। पिक्सल साइज़, अवधि या रंग सीधे अपनी स्टाइलशीट में बदलें — @keyframes भी सामान्य डिक्लेरेशन ही हैं, इसलिए एक्सपोर्ट के बाद भी लोडर का हर हिस्सा संपादन योग्य रहता है।

क्या मेरी सेटिंग्स कहीं अपलोड होती हैं?

नहीं। जनरेटर पूरी तरह मौजूदा ब्राउज़र टैब के अंदर चलता है, किसी खाते की ज़रूरत नहीं, और कोई भी मान स्टोरेज, लॉग, एनालिटिक्स या नेटवर्क में नहीं जाता। डिफ़ॉल्ट वापस लाने के लिए रीसेट दबाएं; टैब बंद करते ही सब कुछ खारिज हो जाता है।

CSS लोडिंग एनिमेशन जनरेटर

प्रोसेसिंग का विवरण

CSS लोडिंग एनिमेशन जनरेटर

टेम्पलेट · 264

लाइव प्रीव्यू

CSS लोडर कैसे डिज़ाइन करें

लोडर की शैली चुनें

फ्रेम और स्ट्रोक का आकार तय करें

गति और रंग समायोजित करें

या नमूने से शुरुआत करें

CSS कॉपी या डाउनलोड करें

इसे अपने मार्कअप में जोड़ें

टूल के तथ्य

आपका इनपुट ब्राउज़र में ही रहता है।

लोकल एक्ज़ीक्यूशन

कोई छिपी प्रोसेसिंग नहीं

खाते की ज़रूरत नहीं

तुरंत रीसेट

CSS लोडिंग एनिमेशन जनरेटर कब उपयोगी होता है

नारंगी ऑर्बिट रिंग बनाएँ

तीन बिंदुओं का नमूना निर्यात करें

फ्रेम में न समाने वाले बिंदु ठीक करें

CSS लोडिंग एनिमेशन जनरेटर असल में क्या करता है

संबंधित काम, कोई बंद गली नहीं।

CSS चेकबॉक्स जनरेटर

CSS टॉगल स्विच जनरेटर

CSS क्लिप पाथ जनरेटर

CSS बैकग्राउंड पैटर्न जनरेटर

CSS लोडिंग एनिमेशन जनरेटर

टेम्पलेट · 264

लाइव प्रीव्यू