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

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

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

इस पहले लेख के लिए, हम अधिक सामान्य लोडर पैटर्न में से एक बनाने जा रहे हैं: कताई बार:

यहाँ दृष्टिकोण है

इस लोडर के लिए एक तुच्छ कार्यान्वयन एक मूल तत्व (नौ कुल तत्वों के लिए) के अंदर लिपटे प्रत्येक बार के लिए एक तत्व बनाना है, फिर इसके साथ खेलें opacity और transform कताई प्रभाव प्राप्त करने के लिए।

हालांकि, मेरे कार्यान्वयन के लिए केवल एक तत्व की आवश्यकता है:

<div class="loader"></div>

... और 10 सीएसएस घोषणाएं:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

आइए इसे तोड़ दें

पहली नज़र में, कोड अजीब लग सकता है, लेकिन आप देखेंगे कि यह आपके विचार से कहीं अधिक सरल है। पहला कदम तत्व के आयाम को परिभाषित करना है। हमारे मामले में, यह एक है 150px वर्ग। हम डाल सकते हैं aspect-ratio उपयोग करने के लिए तो तत्व वर्गाकार रहता है चाहे कुछ भी हो।

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

सीएसएस लोडर बनाते समय, मैं हमेशा समग्र आकार को नियंत्रित करने के लिए एक मान रखने का प्रयास करता हूं। इस मामले में, यह है width और हमारे द्वारा कवर की जाने वाली सभी गणनाएं उस मान को संदर्भित करेंगी। यह मुझे लोडर को नियंत्रित करने के लिए एकल मान को बदलने की अनुमति देता है। बहुत सारे अतिरिक्त मूल्यों को समायोजित करने की आवश्यकता के बिना हमारे लोडर के आकार को आसानी से समायोजित करने में सक्षम होना हमेशा महत्वपूर्ण होता है।

अगला, हम बार बनाने के लिए ग्रेडिएंट्स का उपयोग करेंगे। यह सबसे पेचीदा हिस्सा है! आइए उपयोग करें एक बनाने के लिए ढाल दो नीचे की तरह बार:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

हमारे ग्रेडिएंट को एक रंग और दो रंग स्टॉप के साथ परिभाषित किया गया है। परिणाम एक ठोस रंग है जिसमें कोई लुप्त होती या संक्रमण नहीं होता है। आकार के बराबर है 34% चौड़ा और 8% लंबा। इसे केंद्र में भी रखा गया है (50%) ट्रिक कीवर्ड वैल्यू का उपयोग है space - यह ग्रेडिएंट की नकल करता है, जिससे हमें कुल दो बार मिलते हैं।

से विशेष विवरण:

छवि को उतनी ही बार दोहराया जाता है, जितनी बार वह बिना क्लिप किए पृष्ठभूमि स्थिति क्षेत्र में फ़िट हो जाती है और फिर छवियों को क्षेत्र को भरने के लिए बाहर निकाल दिया जाता है। पहली और आखिरी छवियां क्षेत्र के किनारों को छूती हैं।

मैं बराबर चौड़ाई का उपयोग कर रहा हूँ 34% जिसका अर्थ है कि हमारे पास दो से अधिक बार नहीं हो सकते हैं (3*34% से अधिक है 100%) लेकिन दो बार के साथ हमारे पास खाली जगह होगी (100% - 2 * 34% = 32%) उस जगह को दो सलाखों के बीच बीच में रखा गया है। दूसरे शब्दों में, हम उस ग्रेडिएंट के लिए चौड़ाई का उपयोग करते हैं जो बीच में है 33% और 50% यह सुनिश्चित करने के लिए कि हमारे पास कम से कम दो बार हैं जिनके बीच थोड़ी सी जगह है। मूल्य space वह है जो उन्हें हमारे लिए सही ढंग से रखता है।

हम ऐसा ही करते हैं और ऊपर और नीचे दो और बार प्राप्त करने के लिए दूसरी समान ढाल बनाते हैं, जो हमें a background संपत्ति का मूल्य:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

हम पुनरावृत्ति से बचने के लिए CSS चर का उपयोग करके इसे अनुकूलित कर सकते हैं:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

तो, अब हमारे पास चार बार हैं और, सीएसएस चर के लिए धन्यवाद, हम एक बार रंग मान लिख सकते हैं जिससे बाद में अपडेट करना आसान हो जाता है (जैसे हमने लोडर के आकार के साथ किया)।

शेष बार बनाने के लिए, आइए इसमें टैप करें .loader तत्व और उसका ::before छद्म तत्व को कुल आठ के लिए चार और बार प्राप्त करने के लिए।

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

के उपयोग पर ध्यान दें display: grid. यह हमें ग्रिड के डिफ़ॉल्ट पर भरोसा करने की अनुमति देता है stretch छद्म तत्व को अपने माता-पिता के पूरे क्षेत्र को कवर करने के लिए संरेखण; इस प्रकार उस पर एक आयाम निर्दिष्ट करने की कोई आवश्यकता नहीं है - एक और चाल जो कोड को कम करती है और हमें बहुत सारे मूल्यों से निपटने से बचाती है!

अब छद्म तत्व को किसके द्वारा घुमाते हैं 45deg शेष सलाखों की स्थिति के लिए। ट्रिक देखने के लिए निम्न डेमो को होवर करें:

अस्पष्टता सेट करना

हम जो करने की कोशिश कर रहे हैं वह यह धारणा बना रहा है कि एक बार है जो अपने पीछे लुप्त होती सलाखों का निशान छोड़ देता है क्योंकि यह एक गोलाकार पथ की यात्रा करता है। अब हमें उस निशान को बनाने के लिए अपने बार की पारदर्शिता के साथ खेलने की जरूरत है, जो हम CSS के साथ करने जा रहे हैं mask एक शंकु-ढाल के साथ संयुक्त रूप से निम्नानुसार है:

mask: conic-gradient(from 22deg,#0003,#000);

चाल को बेहतर ढंग से देखने के लिए, आइए इसे एक पूर्ण-रंगीन बॉक्स पर लागू करें:

लाल रंग की पारदर्शिता धीरे-धीरे दक्षिणावर्त बढ़ रही है। हम इसे अपने लोडर पर लागू करते हैं और हमारे पास विभिन्न अस्पष्टता वाले बार हैं:

वास्तव में, प्रत्येक पट्टी फीकी लगती है क्योंकि यह एक ढाल द्वारा नकाबपोश होती है और दो अर्ध-पारदर्शी रंगों के बीच आती है। जब यह चलता है तो यह शायद ही ध्यान देने योग्य होता है, इसलिए यह कहने में सक्षम होने की तरह है कि सभी सलाखों में एक ही रंग की अस्पष्टता के साथ एक ही रंग होता है।

रोटेशन

आइए हमारे लोडर को प्राप्त करने के लिए एक रोटेशन एनीमेशन लागू करें। ध्यान दें, कि हमें एक चरणबद्ध एनीमेशन की आवश्यकता है, न कि एक निरंतर, इसलिए मैं इसका उपयोग कर रहा हूं steps(8). 8 सलाखों की संख्या के अलावा और कुछ नहीं है, ताकि कितनी बार उपयोग में हैं, इसके आधार पर मूल्य को बदला जा सकता है।

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

इतना ही! हमारे पास केवल एक तत्व और सीएसएस की कुछ पंक्तियों के साथ हमारा लोडर है। हम एक मान को समायोजित करके इसके आकार और रंग को आसानी से नियंत्रित कर सकते हैं।

चूंकि हमने केवल का उपयोग किया है ::before छद्म तत्व, हम उपयोग करके चार और बार जोड़ सकते हैं ::after कुल 12 बार और लगभग समान कोड के साथ समाप्त करने के लिए:

हम विचार करने के लिए अपने छद्म तत्वों के रोटेशन को अपडेट करते हैं 30deg और 60deg के बजाय 45deg आठ के बजाय बारह-चरणीय एनिमेशन का उपयोग करते समय। मैंने ऊंचाई भी घटाई 5% के बजाय 8% सलाखों को थोड़ा पतला करने के लिए।

यह भी ध्यान दें कि हमारे पास है grid-area: 1/1 छद्म तत्वों पर। यह हमें उन्हें एक ही क्षेत्र में एक दूसरे के ऊपर ढेर करने की अनुमति देता है।

अंदाज़ा लगाओ? हम दूसरे कार्यान्वयन का उपयोग करके उसी लोडर तक पहुँच सकते हैं:

क्या आप कोड के पीछे के तर्क को समझ सकते हैं? यहां एक संकेत दिया गया है: अस्पष्टता को अब CSS से नियंत्रित नहीं किया जाता है mask लेकिन ढाल के अंदर और का भी उपयोग कर रहा है opacity संपत्ति।

इसके बजाय डॉट्स क्यों नहीं?

हम इसे पूरी तरह से कर सकते हैं:

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

नए ग्रेडिएंट कॉन्फ़िगरेशन को दर्शाने के लिए नीचे एक चित्र दिया गया है:

यदि आप सफारी का उपयोग कर रहे हैं, तो ध्यान दें कि डेमो छोटी गाड़ी हो सकती है। ऐसा इसलिए है क्योंकि Safari के पास वर्तमान में इसके लिए समर्थन का अभाव है at रेडियल ग्रेडियेंट में वाक्य रचना। लेकिन हम उस पर काबू पाने के लिए ढाल को थोड़ा सा पुन: कॉन्फ़िगर कर सकते हैं:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

अधिक लोडर उदाहरण

पिछले एक के समान स्पिनर लोडर के लिए यहां एक और विचार है।

इसके लिए, मैं केवल इस पर निर्भर हूं background और mask आकार बनाने के लिए (कोई छद्म-तत्वों की आवश्यकता नहीं है)। मैं एक ही कोड से बहुत सारी विविधताएं बनाने में सक्षम होने के लिए सीएसएस चर के साथ कॉन्फ़िगरेशन को भी परिभाषित कर रहा हूं - सीएसएस चर की शक्तियों का एक और उदाहरण। मैंने इस तकनीक के बारे में एक और लेख लिखा यदि आप अधिक विवरण चाहते हैं।

ध्यान दें कि कुछ ब्राउज़र अभी भी a . पर निर्भर हैं -webkit- के लिए उपसर्ग mask-composite मूल्यों के अपने सेट के साथ, और स्पिनर को डेमो में प्रदर्शित नहीं करेगा। यहाँ इसे करने का एक तरीका है बिना mast-composite अधिक ब्राउज़र समर्थन के लिए।

मेरे पास आपके लिए एक और है:

इसके लिए, मैं उपयोग कर रहा हूँ a background-color रंग को नियंत्रित करने के लिए, और उपयोग करें mask और mask-composite अंतिम आकार बनाने के लिए:

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

ऊपर लपेटकर

देखिए, CSS में हम बहुत कुछ कर सकते हैं, केवल एक div, कुछ ग्रेडिएंट, छद्म-तत्व, चर के साथ। ऐसा लगता है कि हमने विभिन्न कताई लोडरों का एक पूरा समूह बनाया है, लेकिन वे सभी मूल रूप से मामूली संशोधनों के साथ एक ही चीज़ हैं।

अभी तो यह शुरुआत है। इस श्रृंखला में, हम CSS लोडर बनाने के लिए और अधिक विचारों और उन्नत अवधारणाओं को देखेंगे।

---

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

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