सिंगल एलिमेंट लोडर: द बार्स

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

आइए एक नहीं, दो नहीं, बल्कि बार लोडर के 20 उदाहरणों से शुरू करें।

क्या?! क्या आप उनमें से प्रत्येक के बारे में विस्तार से बताने जा रहे हैं? यह एक लेख के लिए बहुत अधिक है!

पहली नज़र में ऐसा लग सकता है! लेकिन वे सभी एक ही कोड संरचना पर भरोसा करते हैं और हम विविधताएं बनाने के लिए केवल कुछ मानों को अपडेट करते हैं। यह सीएसएस की सारी शक्ति है। हम एक लोडर बनाना नहीं सीखते हैं, लेकिन हम विभिन्न तकनीकों को सीखते हैं जो हमें केवल एक ही कोड संरचना का उपयोग करके जितना चाहें उतना लोडर बनाने की अनुमति देते हैं।

चलो कुछ बार बनाते हैं!

हम उनके लिए आयामों को परिभाषित करके शुरू करते हैं width (या height) संग aspect-ratio अनुपात बनाए रखने के लिए:

.bars { width: 45px; aspect-ratio: 1;
}

हम पृष्ठभूमि पर एक रैखिक ढाल के साथ "नकली" तीन सलाखों को छांटते हैं - इस श्रृंखला के भाग 2 में हमने डॉट लोडर कैसे बनाए।

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

उपरोक्त कोड हमें निम्नलिखित परिणाम देगा:

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

बार को एनिमेट करना

हम बार लोडर बनाने के लिए या तो तत्व के आकार या स्थिति को चेतन करते हैं। आइए निम्नलिखित एनिमेशन कीफ़्रेम को परिभाषित करके आकार को चेतन करें:

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

देखिए वहां क्या हो रहा है? 0% और 100% के बीच, एनीमेशन बदल जाता है background-size तत्व की पृष्ठभूमि ढाल का। प्रत्येक कीफ़्रेम तीन पृष्ठभूमि आकार (प्रत्येक ग्रेडिएंट के लिए एक) सेट करता है।

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

क्या आप उन सभी संभावित विविधताओं की कल्पना करना शुरू कर सकते हैं जो हम आकारों या स्थितियों के लिए विभिन्न एनीमेशन कॉन्फ़िगरेशन के साथ खेलकर प्राप्त कर सकते हैं?

आइए आकार को ठीक करें 20% 50% और इस बार पदों को अपडेट करें:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

...जो हमें एक और लोडर देता है!

आपको शायद अब तक चाल मिल गई है। आपको बस एक समयरेखा परिभाषित करने की आवश्यकता है जिसे आप एक कीफ़्रेम में अनुवाद करते हैं। आकार, स्थिति - या दोनों को एनिमेट करके! - हमारी उंगलियों पर लोडर संभावनाओं की अनंत संख्या है।

और एक बार जब हम इस तरह की तकनीक के साथ सहज हो जाते हैं तो हम आगे बढ़ सकते हैं और अधिक जटिल ढाल का उपयोग करके सम बनाने के लिए अधिक लोडर

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

फैंसी हो रही है

क्या आपको वो मास्क ट्रिक याद है जो हमने डॉट लोडर के साथ किया था इस श्रंखला का दूसरा लेख? हम यहाँ भी ऐसा ही कर सकते हैं!

यदि हम उपरोक्त सभी तर्क को के अंदर लागू करते हैं mask संपत्ति हम अपने लोडर के लिए एक फैंसी रंग जोड़ने के लिए किसी भी पृष्ठभूमि विन्यास का उपयोग कर सकते हैं।

आइए एक डेमो लें और इसे अपडेट करें:

मैंने जो कुछ किया वह सब अपडेट कर रहा है background-* साथ में mask-* और मैंने एक ढाल रंग जोड़ा। उतना ही सरल और फिर भी हमें एक और अच्छा लोडर मिलता है।

तो डॉट्स और बार में कोई अंतर नहीं है?

कोई फर्क नहीं! मैंने अधिक से अधिक उदाहरणों को कवर करने के लिए दो अलग-अलग लेख लिखे लेकिन दोनों में, मैं एक ही तकनीक पर भरोसा कर रहा हूं:

1. आकार बनाने के लिए ग्रेडिएंट (डॉट्स या बार या शायद कुछ और)
2. animating background-size और / या background-position लोडर एनीमेशन बनाने के लिए
3. रंगों का स्पर्श जोड़ने के लिए मास्क जोड़ना

सलाखों को गोल करना

आइए इस बार कुछ अलग करने की कोशिश करें जहां हम अपने सलाखों के किनारों को गोल कर सकें।

एक तत्व का उपयोग करना और उसका ::before और ::after छद्म, हम तीन समान सलाखों को परिभाषित करते हैं:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

यह हमें तीन बार देता है, इस बार एक रैखिक ढाल पर भरोसा किए बिना:

अब चाल उन सलाखों को एक सुंदर ढाल के साथ भरने की है। निरंतर ढाल का अनुकरण करने के लिए, हमें इसके साथ खेलना होगा background गुण। उपरोक्त आकृति में, हरा क्षेत्र लोडर द्वारा कवर किए गए क्षेत्र को परिभाषित करता है। वह क्षेत्र ग्रेडिएंट के आकार का होना चाहिए और, यदि हम गणित करते हैं, तो यह लेबल किए गए दोनों पक्षों को गुणा करने के बराबर है S आरेख में, या background-size: var(--s) var(--s).

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

मुख्य तत्व (केंद्र में रखा गया) के लिए, पृष्ठभूमि को केंद्र में होना चाहिए। हम निम्नलिखित का उपयोग करते हैं:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

बाईं ओर छद्म तत्व के लिए, हमें बाईं ओर की पृष्ठभूमि की आवश्यकता है

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

और दाईं ओर छद्म के लिए, पृष्ठभूमि को दाईं ओर स्थित करने की आवश्यकता है:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

एक ही सीएसएस चर का उपयोग करना, --_i, जिसे हमने अनुवाद के लिए उपयोग किया है, हम कोड इस तरह लिख सकते हैं:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

अब, हमें केवल ऊंचाई को चेतन करना है और कुछ विलंब जोड़ना है! यहां तीन उदाहरण दिए गए हैं जहां रंग और आकार अलग-अलग हैं:

ऊपर लपेटकर

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

अगले लेख तक, मैं आपको लोडर के एक मज़ेदार संग्रह के साथ छोड़ दूँगा जहाँ मैं संयोजन कर रहा हूँ बिन्दु और सलाखें!

---

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

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