सीधे कंटेंट पर जाएँ
Toolars
एक्सप्लोर करें
बग रिपोर्ट करें

डिज़ाइन · लोकल उपयोगिता

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

CSS Loader Generator

लोडिंग स्पिनर की स्टाइल, फ़्रेम साइज़, स्ट्रोक, रफ़्तार और रंग विज़ुअली सेट करें; तैयार CSS कॉपी या डाउनलोड करें और सीधे अपने मार्कअप में जोड़ें।

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

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

लोकल रूप से चलता है · कुछ भी अपलोड नहीं होता

CSS लोडिंग एनिमेशन जनरेटर कैसे काम करता है, निजता और संबंधित टूल

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

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

  1. 01

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

    लोडर शैली खोलें और क्लासिक घूमती रिंग के लिए ऑर्बिट रिंग चुनें या उछलते बिंदु-त्रिक के लिए तीन बिंदु। लाइव पूर्वावलोकन आपके हर बदलाव के साथ एनिमेट होता है, और एक्सपोर्ट करने पर हर शैली अपना @keyframes साथ लाती है।

  2. 02

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

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

  3. 03

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

    चक्र अवधि 0.2 से 4 सेकंड के बीच 0.05 s के चरणों में चुनें। सक्रिय रंग रिंग के ऊपरी बॉर्डर या बीच वाले बिंदु पर लागू होता है; ट्रैक रंग बाकी रिंग या दोनों बाहरी बिंदुओं पर लागू होता है। धीमे चक्र शांत बैकग्राउंड काम जैसे लगते हैं; तेज़ चक्र जल्दबाज़ी का एहसास देते हैं।

  4. 04

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

    नमूना लोड करें दबाकर एक दमदार तीन बिंदु प्रीसेट लागू करें — 72 px फ्रेम, 12 px बिंदु और लाल-पीले रंग में 0.75 s चक्र — शुरुआती बिंदु के तौर पर। रीसेट हमेशा डिफ़ॉल्ट ऑर्बिट रिंग पर वापस लाता है।

  5. 05

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

    रूलसेट को क्लिपबोर्ड पर रखने के लिए CSS कॉपी करें दबाएं, या toolars-loader.css सहेजने के लिए .css डाउनलोड करें। आउटपुट पैनल ठीक वही बाइट्स दिखाता है जो आप एक्सपोर्ट कर रहे हैं, और जब तक कोई मान वैलिडेशन पास नहीं करता, दोनों बटन बंद रहते हैं।

  6. 06

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

    ऑर्बिट रिंग को .loader क्लास वाले एक ही एलिमेंट की ज़रूरत है; तीन बिंदु उसके अंदर तीन span चाइल्ड चाहता है। एक्सपोर्ट में एक prefers-reduced-motion ब्लॉक शामिल है जो मोशन-संवेदनशील विज़िटर के लिए एनिमेशन रोक देता है।

टूल के तथ्य

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

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

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 की उम्मीद करता है?
ऑर्बिट रिंग .loader क्लास वाले एक ही एलिमेंट के साथ काम करती है। तीन बिंदु .loader के अंदर तीन span चाइल्ड चाहता है; स्टाइलशीट उनके एनिमेशन डिले अपने आप सीढ़ीनुमा लगा देती है, इसलिए मार्कअप साधारण रहता है और कोई अतिरिक्त क्लास नहीं चाहिए।
पूर्वावलोकन में मान जांचें क्यों लिखा है?
24–160 px का फ्रेम और 2–20 px का स्ट्रोक या बिंदु इस्तेमाल करें। रिंग का स्ट्रोक फ्रेम के आधे से कम होना चाहिए। तीन बिंदु एक-दूसरे से कम से कम 2 px की दूरी पर फिट होने चाहिए; वरना कॉपी और डाउनलोड बंद रहेंगे। रिंग के एक्सपोर्ट किए गए आयामों में उसका बॉर्डर भी शामिल है।
तीनों बिंदु तालमेल में कैसे रहते हैं?
कोरियोग्राफ़ी स्टाइलशीट संभालती है: बीच वाला span सक्रिय रंग लेता है, और दूसरे व तीसरे span को चक्र के एक-तिहाई और दो-तिहाई के निगेटिव एनिमेशन डिले मिलते हैं, इसलिए उछाल पूरे लूप में समान रूप से बिखरती है।
क्या लोडर reduced-motion सेटिंग्स का सम्मान करता है?
हां। हर एक्सपोर्ट prefers-reduced-motion के लिए एक मीडिया क्वेरी के साथ खत्म होता है जो एनिमेशन बंद कर देती है — बिंदु वाला वेरिएंट एक स्थिर ओपेसिटी पर भी ठहर जाता है — इसलिए कम मोशन मांगने वाले विज़िटर को घूमते संकेतक की जगह शांत, स्थिर संकेतक मिलता है।
क्या मैं लोडर को अपने प्रोजेक्ट में पेस्ट करने के बाद समायोजित कर सकता/सकती हूँ?
बिल्कुल; आउटपुट पढ़ने लायक मानों वाला सादा CSS है। पिक्सल साइज़, अवधि या रंग सीधे अपनी स्टाइलशीट में बदलें — @keyframes भी सामान्य डिक्लेरेशन ही हैं, इसलिए एक्सपोर्ट के बाद भी लोडर का हर हिस्सा संपादन योग्य रहता है।
क्या मेरी सेटिंग्स कहीं अपलोड होती हैं?
नहीं। जनरेटर पूरी तरह मौजूदा ब्राउज़र टैब के अंदर चलता है, किसी खाते की ज़रूरत नहीं, और कोई भी मान स्टोरेज, लॉग, एनालिटिक्स या नेटवर्क में नहीं जाता। डिफ़ॉल्ट वापस लाने के लिए रीसेट दबाएं; टैब बंद करते ही सब कुछ खारिज हो जाता है।

डिज़ाइन में जारी रखें

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

पूरे इंडेक्स पर लौटे बिना किसी दूसरे केंद्रित वर्कस्पेस में जाएँ।

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

CSS Checkbox Generator

कस्टम चेकबॉक्स का साइज़, फ़्रेम और दोनों स्टेट के रंग डिज़ाइन करें, चुनी और बिना चुनी हालत प्रीव्यू करें और नेटिव मार्कअप के साथ CSS कॉपी करें।

बनाएँ

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

CSS Switch Generator

सिर्फ़ CSS वाले टॉगल स्विच का ट्रैक, थंब और दोनों स्टेट के रंग सेट करें, ट्रांज़िशन प्रीव्यू करें और मार्कअप समेत पूरा कोड कॉपी या डाउनलोड करें।

बनाएँ

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

CSS Clip Path Generator

खींचकर, कीबोर्ड या निर्देशांक से बिंदु संपादित करें। चार प्रीसेट से शुरू करके clip-path घोषणा या पूरा CSS स्थानीय रूप से कॉपी करें।

बनाएँ

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

CSS Background Pattern Generator

दो रंगों और एडजस्टेबल टाइल से दोहराए जाने वाले बैकग्राउंड पैटर्न बनाएँ — असली स्केल पर रिपीट जाँचें और किसी इमेज फ़ाइल के बिना पैटर्न CSS कॉपी करें।

बनाएँ