सिंगल एलिमेंट लोडर: डॉट्स

हम इस श्रृंखला में लोडर देख रहे हैं। इसके अलावा, हम कुछ सामान्य लोडर पैटर्न को तोड़ रहे हैं और उन्हें एक ही div से अधिक कुछ नहीं के साथ फिर से कैसे बनाया जाए। अब तक, हमने अलग चुना है क्लासिक कताई लोडर. अब, आइए एक और देखें जिसके बारे में आप अच्छी तरह से जानते हैं: बिन्दु।

डॉट लोडर हर जगह हैं। वे साफ-सुथरे हैं क्योंकि उनमें आमतौर पर तीन बिंदु होते हैं जो एक टेक्स्ट इलिप्सिस (...) की तरह दिखते हैं जो चारों ओर नृत्य करते हैं।

यहां हमारा लक्ष्य एक ही चीज को एक ही डिव एलिमेंट से बनाना है। दूसरे शब्दों में, प्रत्येक डॉट के लिए कोई एक डिव प्रति डॉट या अलग-अलग एनिमेशन नहीं है।

ऊपर लोडर का वह उदाहरण एक एकल div तत्व, कुछ CSS घोषणाओं और कोई छद्म तत्व के साथ बनाया गया है। मैं CSS का उपयोग करके दो तकनीकों का संयोजन कर रहा हूँ background और mask. और जब हम काम पूरा कर लेंगे, तो हम देखेंगे कि कैसे एक पृष्ठभूमि ढाल को एनिमेट करने से प्रत्येक डॉट बदलते रंगों का भ्रम पैदा करने में मदद मिलती है क्योंकि वे उत्तराधिकार में ऊपर और नीचे जाते हैं।

बैकग्राउंड एनिमेशन

आइए पृष्ठभूमि एनीमेशन से शुरू करें:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

मुझे आशा है कि यह बहुत सीधा दिखता है। हमें जो मिला है वह है a 180pxचौड़ा .loader तत्व जो दो शंक्वाकार ढालों को दिखाता है जो कठोर रंग खेल रहे हैं, प्रत्येक दो रंगों के बीच रुकता है - पहला ढाल लाल और नीला है जो शीर्ष आधे हिस्से के साथ है .loader, और दूसरा ग्रेडिएंट नीचे के आधे भाग के साथ हरा और बैंगनी है।

जिस तरह से लोडर की पृष्ठभूमि का आकार होता है (200% वाइड), हम एक बार में प्रत्येक आधे में उनमें से केवल एक रंग देखते हैं। फिर हमारे पास यह छोटा एनीमेशन है जो उन बैकग्राउंड ग्रेडिएंट्स की स्थिति को बाएँ, दाएँ, और फिर से हमेशा और हमेशा के लिए धक्का देता है।

पृष्ठभूमि गुणों के साथ काम करते समय — विशेष रूप से background-position - मैं हमेशा my . का उल्लेख करता हूं स्टैक ओवरफ्लो उत्तर जहां मैं विस्तृत विवरण दे रहा हूं यह सब कैसे काम करता है पर। यदि आप सीएसएस पृष्ठभूमि प्रवंचना से असहज हैं, तो मैं अत्यधिक अनुशंसा करता हूं कि आगे आने वाली सहायता के लिए उस उत्तर को पढ़ें।

एनीमेशन में, ध्यान दें कि पहली परत है Y=0% (शीर्ष पर रखा गया) जबकि X से परिवर्तन है 0% सेवा मेरे 100%. दूसरी परत के लिए, हमारे पास समान है X लेकिन Y=100% (नीचे रखा गया है)।

a . का उपयोग क्यों कर रहे हैं conic-gradient() के बजाय linear-gradient()?

अच्छा प्रश्न! सहज रूप से, हमें इस तरह से दो-रंग के ग्रेडिएंट बनाने के लिए एक लीनियर ग्रेडिएंट का उपयोग करना चाहिए:

linear-gradient(90deg, red 50%, blue 0)

लेकिन हम a . का उपयोग करके भी उसी तक पहुँच सकते हैं conic-gradient() - और कम कोड के साथ। हम कोड को कम करते हैं और इस प्रक्रिया में एक नई तरकीब भी सीखते हैं!

रंगों को बाएँ और दाएँ स्लाइड करना यह दिखाने का एक अच्छा तरीका है कि हम रंग बदल रहे हैं, लेकिन यह बेहतर हो सकता है यदि हम इसके बजाय तुरंत रंग बदलते हैं - इस तरह, लोडर डॉट के एक ही समय में दो रंगों को चमकाने की कोई संभावना नहीं है। . ऐसा करने के लिए, आइए इसे बदलें animationका समय समारोह . से linear सेवा मेरे steps(1)

लोडर डॉट्स

यदि आपने के साथ अनुसरण किया है इस श्रंखला का पहला लेख, मुझे यकीन है कि आप जानते हैं कि आगे क्या होता है: सीएसएस मास्क! जो बात मुखौटों को इतना महान बनाती है, वह यह है कि वे हमें छाँटने देते हैं पृष्ठभूमि के "कट आउट" भाग दूसरे तत्व के आकार में। इसलिए, इस मामले में, हम कुछ बिंदु बनाना चाहते हैं, बिंदुओं के माध्यम से पृष्ठभूमि ढाल दिखाना चाहते हैं, और पृष्ठभूमि के किसी भी हिस्से को काट देना चाहते हैं जो डॉट का हिस्सा नहीं हैं।

हम उपयोग करने जा रहे हैं radial-gradient() इसके लिए:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

इसमें कुछ डुप्लीकेट कोड हैं, तो चलिए चीजों को पतला करने के लिए एक CSS वैरिएबल बनाते हैं:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

ठंडा ठंडा। लेकिन अब हमें एक नए एनीमेशन की जरूरत है जो एनिमेटेड ग्रेडिएंट्स के बीच डॉट्स को ऊपर और नीचे ले जाने में मदद करे।

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

हां, इसमें कुल तीन रेडियल ग्रेडिएंट हैं, सभी समान कॉन्फ़िगरेशन और समान आकार के हैं - एनीमेशन प्रत्येक की स्थिति को अपडेट करेगा। ध्यान दें कि X प्रत्येक बिंदु का निर्देशांक तय किया गया है। mask-position परिभाषित किया गया है कि पहला बिंदु बाईं ओर है (0%), केंद्र में दूसरा वाला (50%), और तीसरा दाईं ओर (100%) हम केवल अपडेट करते हैं Y से समन्वय करें 0% सेवा मेरे 100% डॉट्स नृत्य करने के लिए।

यहाँ हमें क्या मिलता है:

अब, इसे हमारे ग्रेडिएंट एनीमेशन के साथ जोड़ दें और जादू होने लगे:

डॉट लोडर विविधताएं

पिछले उदाहरण में हमने जो CSS वेरिएबल बनाया है, वह नए रंगों में स्वैप करना और उसी लोडर के अधिक रूपांतर बनाना इतना आसान बनाता है। उदाहरण के लिए, विभिन्न रंग और आकार:

हमारे बिंदुओं के लिए एक और आंदोलन के बारे में क्या?

यहां, मैंने केवल विभिन्न पदों पर विचार करने के लिए एनीमेशन को अपडेट किया था, और हमें उसी कोड संरचना के साथ एक और लोडर मिलता है!

मुखौटा परतों के लिए मैंने जिस एनीमेशन तकनीक का उपयोग किया है, उसका उपयोग पृष्ठभूमि परतों के साथ एक ही रंग के साथ कई अलग-अलग लोडर बनाने के लिए भी किया जा सकता है। मैंने इसके बारे में एक विस्तृत लेख लिखा था। आप देखेंगे कि एक ही कोड संरचना से हम केवल कुछ मूल्यों को बदलकर विभिन्न विविधताएं बना सकते हैं। मैं लेख के अंत में कुछ उदाहरण साझा कर रहा हूं।

एक डॉट वाला लोडर क्यों नहीं?

इसे टटोलना काफी आसान होना चाहिए क्योंकि मैं उसी तकनीक का उपयोग कर रहा हूं लेकिन अधिक सरल तर्क के साथ:

यहाँ लोडर का एक और उदाहरण है जहाँ मैं भी एनिमेट कर रहा हूँ radial-gradient के साथ संयुक्त सीएसएस फिल्टर और mix-blend-mode एक ब्लॉबी प्रभाव बनाने के लिए:

यदि आप कोड की जांच करते हैं, तो आप देखेंगे कि मैं वास्तव में वहां केवल एनिमेट कर रहा हूं background-position, ठीक वैसे ही जैसे हमने पिछले लोडर के साथ किया था, लेकिन एक डैश जोड़ना background-size यह देखने के लिए कि बूँद बड़ी हो जाती है क्योंकि यह डॉट्स को अवशोषित करती है।

यदि आप उस बूँद प्रभाव के पीछे के जादू को समझना चाहते हैं, तो आप इसका उल्लेख कर सकते हैं ये इंटरेक्टिव स्लाइड (केवल क्रोम) द्वारा एना ट्यूडर क्योंकि वह विषय को इतनी अच्छी तरह से कवर करती है!

यहाँ एक और डॉट लोडर विचार है, इस बार एक अलग तकनीक का उपयोग करते हुए:

यह केवल 10 सीएसएस घोषणाएं और एक कीफ़्रेम है। मुख्य तत्व और उसके दो छद्म तत्वों में एक ही रेडियल ग्रेडिएंट के साथ एक ही पृष्ठभूमि विन्यास होता है। प्रत्येक व्यक्ति एक बिंदु बनाता है, कुल तीन के लिए। एनीमेशन प्रत्येक बिंदु के लिए अलग-अलग देरी का उपयोग करके ढाल को ऊपर से नीचे तक ले जाता है।

ओह, और ध्यान दें कि यह डेमो CSS ग्रिड का उपयोग कैसे करता है। यह हमें ग्रिड के डिफ़ॉल्ट का लाभ उठाने की अनुमति देता है stretch संरेखण ताकि दोनों छद्म तत्व अपने माता-पिता के पूरे क्षेत्र को कवर कर सकें। आकार देने की कोई ज़रूरत नहीं है! चारों ओर से थोड़ा धक्का दें translate() और हम सब तैयार हैं।

और ज्यादा उदाहरण!

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

अगला…

ठीक है, इसलिए हमने इस लेख में डॉट लोडर और पिछले लेख में स्पिनरों को शामिल किया है। इस चार-भाग श्रृंखला के अगले लेख में, हम अपना ध्यान एक अन्य सामान्य प्रकार के लोडर की ओर मोड़ेंगे: सलाखें। हमने अब तक जो कुछ भी सीखा है, उसमें से हम बहुत कुछ लेंगे और देखेंगे कि हम उन्हें कैसे बढ़ा सकते हैं और एक और सिंगल एलिमेंट लोडर बना सकते हैं जिसमें कम से कम कोड और जितना संभव हो उतना लचीलापन हो।

---

सिंगल एलिमेंट लोडर: डॉट्स मूल रूप से प्रकाशित सीएसएस-ट्रिक्स। तुम्हे करना चाहिए समाचार पत्र प्राप्त करें.

• कॉइनस्मार्ट। यूरोप का सर्वश्रेष्ठ बिटकॉइन और क्रिप्टो एक्सचेंज।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। नि: शुल्क प्रवेश।
• क्रिप्टोहॉक। Altcoin रडार। मुफ्त परीक्षण।
• स्रोत: https://css-tricks.com/single-element-loaders-the-dots/