लोड हो रहा है… वेनिला जावास्क्रिप्ट में एनिमेशन

परिचय

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

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

लोडर कैसे बनाएं

ऐसे कई तरीके हैं जिनसे लोग अपने लोडर को प्रदर्शित करना चाहते हैं। इस गाइड के उद्देश्य के लिए, हम एक लोडर का निर्माण करेंगे जो पूरी स्क्रीन को कवर करेगा और पेज लोड होने के बाद गायब हो जाएगा। सबसे पहले, हमें एक प्लेसहोल्डर HTML पेज बनाना होगा:

<div class="loader-container"> <div class="spinner"></div>
</div> <div class="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with Vanilla JavaScript. </p> <div class="buttons"> <button class="btn"><a href="#">Read Article</a></button> <button class="btn get-quote">Generate Quote</button> </div> <div class="quote-section"> <blockquote class="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> <span class="author">- Rollo May</span> </div>
</div>

सादगी के लिए, हमारे पास केवल दो हैं <div> ब्लॉक - एक लोडर के लिए और एक वेबसाइट की सामग्री के लिए।

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

GIF का उपयोग करके लोडर बनाएं

A GIF एक एनिमेटेड आइकन है जो अनिश्चित काल तक चलता है। एक बार हमने अपना बनाया है GIF, हम स्टाइल करेंगे loader-container div जो इसे घर देगा। इसे स्टाइल करने के कई तरीके हैं! आप यहां वास्तव में रचनात्मक हो सकते हैं। लोडिंग सामग्री को "ब्लॉक आउट" करने के लिए, हम आइकन के बगल में अपने पृष्ठ के शीर्ष पर एक काली पृष्ठभूमि के साथ बस एक परत जोड़ देंगे:

.loader-container { width: 100%; height: 100vh; position: fixed; background: #000 url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center no-repeat; z-index: 1;
}

जब हम अपना वेब पेज अभी लोड करते हैं, तो हमें एक काली पृष्ठभूमि दिखाई देगी जिसमें a GIF स्क्रीन के बीच में लोड हो रहा है, इसी तरह:

इस बिंदु पर, हम जावास्क्रिप्ट का उपयोग करके लोडिंग को लागू करने के लिए तैयार हैं। लेकिन आइए यह भी देखें कि हम a . के बजाय CSS-निर्मित एनीमेशन का उपयोग कैसे कर सकते हैं GIF, जिसे आयात करने के लिए किसी अतिरिक्त फ़ाइल की आवश्यकता नहीं है।

CSS का उपयोग करके लोडर बनाएं

हम CSS के साथ बिल्कुल वैसा ही आइकॉन बनाएंगे। याद रखें, हमने एक अतिरिक्त डिव (spinner) के अंदर loader-container div और यही हम आइकन का प्रतिनिधित्व करने के लिए उपयोग करेंगे:

.spinner { width: 64px; height: 64px; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite;
} @keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

ऊपर दिया गया कोड हमें एक सीएसएस लोडर-आइकन बनाने में मदद करेगा, जिसमें से अब हम लोडर-कंटेनर डिव का उपयोग केंद्र में कर सकते हैं और काली पृष्ठभूमि जोड़ सकते हैं जैसा कि हमने पहले किया था:

.loader-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; background: #000; z-index: 1;
}

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

जावास्क्रिप्ट के साथ लोडिंग एनिमेशन को कैसे लागू करें

जावास्क्रिप्ट हमें अपनी एचटीएमएल संरचना में हेरफेर करने और हटाने या छिपाने की अनुमति देता है loader-container जो वर्तमान में प्रदर्शित है सामने वेबसाइट की सामग्री। इसे पूरा करने के लिए दो प्रमुख दृष्टिकोण हैं - बस इसे छुपाना loader-container, या इसे पूरी तरह से हटा रहा है।

आप जो भी दृष्टिकोण चुनते हैं, उसका उपयोग करने के लिए पहला कदम है querySelector() or getElementById() पुनः प्राप्त करने के लिए loader-container ताकि हम इसमें हेरफेर कर सकें:

const loaderContainer = document.querySelector('.loader-container');

दूसरे, हम उपयोग करेंगे eventListener सुनने के लिए load घटना, ताकि यह कॉलबैक फ़ंक्शन को कॉल करे जब load घटना होती है:

window.addEventListener('load', () => { // ...
});

लोड हो रहा है छुपा रहा है... तत्व

छिपाने के लिए सबसे आम तरीका है loader-container साथ में display: none ताकि जब सामग्री पूरी तरह से लोड हो जाए तो यह गायब हो जाए।

एचटीएमएल डोम हमें जावास्क्रिप्ट से हमारे एचटीएमएल तत्वों की शैली को बदलने की अनुमति देता है, और नीचे दिया गया कोड इंगित करता है कि हम लोडर के कंटेनर को सेट कर रहे हैं display संपत्ति के लिए none ताकि यह एक बार दिखाई न दे load सफल है:

window.addEventListener('load', () => { loaderContainer.style.display = 'none';
});

वैकल्पिक रूप से, आप एक अलग वर्ग बना सकते हैं जो धारण करता है display: none संपत्ति:

.loader-container-hidden { display: none;
}

और फिर उपयोग classList.add() कक्षा को जोड़ने के लिए loader-container तत्व:

window.addEventListener('load', () => { loaderContainer.classList.add('loader-container-hidden');
});

लोडिंग को हटा रहा है… तत्व

अब तक, हमने एक प्रमुख तरीका देखा है जो हमें अपना छिपाने की अनुमति देता है loader-container, जिसका अर्थ है कि तत्व अभी भी मौजूद है, लेकिन छिपा हुआ है। एक अन्य विकल्प तत्व को पूरी तरह से हटाना है:

window.addEventListener('load', () => { loaderContainer.parentElement.removeChild(loaderContainer);
});

इस बिंदु पर, जब हम अपने पेज को लोड करते हैं, तब तक लोडिंग एनीमेशन प्रदर्शित किया जाएगा जब तक कि पेज की सामग्री पूरी तरह से लोड नहीं हो जाती।

एपीआई से बाहरी सामग्री का अनुरोध करते समय लोडिंग एनिमेशन लागू करना

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

हमारे मामले में, आइए a . से एक उद्धरण प्राप्त करने का प्रयास करें उद्धरण एपीआई बिल्ट-इन फ़ेच एपीआई का उपयोग करना। ध्यान दें कि इस लेख की शुरुआत में हमने जो HTML बनाया है, उसमें a "उद्धरण उत्पन्न करें" बटन। हमें बस इतना करना है कि का उपयोग करें document.querxySelector() तत्व प्राप्त करने के लिए विधि और एक को संभालने के लिए कॉलबैक फ़ंक्शन बनाएं click ईवेंट जो ट्रिगर होता है जब उपयोगकर्ता बटन पर क्लिक करता है:

const getQuoteBtn = document.querySelector('.get-quote'); getQuoteBtn.addEventListener('click', () => { fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

यह हमारे आवेदन में यादृच्छिक उद्धरण प्राप्त करने में सफलतापूर्वक हमारी सहायता करेगा, लेकिन हम चाहते हैं कि a एनिमेशन लोड हो रहा है ताकि उपयोगकर्ता को पता चले कि हम सामग्री की अपेक्षा कर रहे हैं। इसे पूरा करने के लिए, हम दो विधियाँ बनाएंगे, एक प्रदर्शित करने के लिए loader-container और दूसरा इसे छिपाने के लिए:

const displayLoading = () => { loaderContainer.style.display = 'block';
}; const hideLoading = () => { loaderContainer.style.display = 'none';
};

इस बिंदु पर, हम अंततः लोडिंग एनीमेशन को कॉलबैक फ़ंक्शन में शामिल कर सकते हैं। जब फ़ेचिंग शुरू होती है तो कॉलबैक फ़ंक्शन लोडिंग एनीमेशन प्रदर्शित करेगा और डेटा प्राप्त होने के बाद इसे छिपा देगा:

getQuoteBtn.addEventListener('click', () => { displayLoading(); fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { hideLoading(); const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

निष्कर्ष

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

• कॉइनस्मार्ट। यूरोप का सर्वश्रेष्ठ बिटकॉइन और क्रिप्टो एक्सचेंज।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। नि: शुल्क प्रवेश।
• क्रिप्टोहॉक। Altcoin रडार। मुफ्त परीक्षण।
• स्रोत: https://stackabuse.com/loading-animation-in-vanilla-javascript/