লোড হচ্ছে... ভ্যানিলা জাভাস্ক্রিপ্টে অ্যানিমেশন

ভূমিকা

ওয়েবসাইট এবং ওয়েব অ্যাপ্লিকেশন বিকাশ করার সময়, একটি লোডিং অ্যানিমেশন সহ যা ঘটছে তা যোগাযোগ করে ব্যবহারকারীর অভিজ্ঞতাকে উল্লেখযোগ্যভাবে উন্নত করতে পারে। এটি ব্যবহারকারীদের জড়িত করে এবং বিষয়বস্তু লোড করার সময় তাদের মনোযোগ ধরে রাখে এবং এটি ব্যবহারকারীদের অনুমান করার পরিবর্তে কী ঘটছে তা বুঝতে সহায়তা করে।

এই নির্দেশিকায়, আমরা দেখব কিভাবে ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে লোডিং অ্যানিমেশন তৈরি করতে হয়। আমরা উভয় অ্যানিমেটেড নিয়ে কাজ করব GIF গুলি এবং CSS-তৈরি করা লোডার এবং দেখুন কিভাবে সেগুলো দুটি পরিস্থিতিতে ব্যবহার করতে হয়: অ্যাপ/ওয়েবসাইট লঞ্চের সময় সামগ্রী লোড করা বা একটি বহিরাগত API থেকে সামগ্রীর অনুরোধ করা।

কিভাবে একটি লোডার তৈরি করবেন

লোকেরা তাদের লোডার প্রদর্শন করতে চাইতে পারে এমন বিভিন্ন উপায় রয়েছে। এই নির্দেশিকাটির উদ্দেশ্যে, আমরা একটি লোডার তৈরি করব যা পুরো স্ক্রীনকে কভার করবে এবং তারপর পৃষ্ঠাটি লোড করা শেষ হলে অদৃশ্য হয়ে যাবে। প্রথমত, আমাদের একটি স্থানধারক 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 জিআইএফ, CSS বা অন্য কিছু দিয়ে তৈরি একটি অ্যানিমেটেড আইকন। মনে রাখা গুরুত্বপূর্ণ বিষয় হল যে একই পদ্ধতি আমরা ব্যবহার করি এমন যেকোনো ধরনের লোডিং আইকনের ক্ষেত্রে প্রযোজ্য।

একটি GIF ব্যবহার করে লোডার তৈরি করুন

A জিআইএফ একটি অ্যানিমেটেড আইকন যা অনির্দিষ্টকালের জন্য বাজায়। একদা আমরা আমাদের তৈরি করেছি জিআইএফ, আমরা শৈলী করব 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 এর পরিবর্তে 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); }
}

উপরের কোডটি আমাদের একটি CSS লোডার-আইকন তৈরি করতে সাহায্য করবে যার আমরা এখন কেন্দ্রে লোডার-কন্টেইনার ডিভি ব্যবহার করতে পারি এবং কালো ব্যাকগ্রাউন্ড যোগ করতে পারি যেমন আমরা আগে করেছি:

.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 যাতে বিষয়বস্তু সম্পূর্ণরূপে লোড হয়ে গেলে এটি অদৃশ্য হয়ে যায়।

HTML DOM আমাদের জাভাস্ক্রিপ্ট থেকে আমাদের HTML উপাদানগুলির শৈলী পরিবর্তন করতে দেয় এবং নীচের কোডটি নির্দেশ করে যে আমরা লোডারের কন্টেইনার সেট করছি 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);
});

এই মুহুর্তে, যখন আমরা আমাদের পৃষ্ঠা লোড করি, পৃষ্ঠার বিষয়বস্তু সম্পূর্ণরূপে লোড না হওয়া পর্যন্ত লোডিং অ্যানিমেশন প্রদর্শিত হবে৷

একটি API থেকে বাহ্যিক সামগ্রীর অনুরোধ করার সময় লোডিং অ্যানিমেশন প্রয়োগ করা

একটি বাহ্যিক API থেকে বিষয়বস্তু আনয়ন একটি লোডার অন্তর্ভুক্ত করার প্রয়োজন হতে পারে যে অন্য পরিস্থিতি. এই ধরনের সামগ্রী আনতে এবং প্রদর্শন করতে কিছু সময় নিতে পারে, তাই একটি লোডার অন্তর্ভুক্ত করা ভাল।

আমাদের ক্ষেত্রে, এর একটি থেকে একটি উদ্ধৃতি পেতে চেষ্টা করা যাক উদ্ধৃতি API বিল্ট-ইন ফেচ API ব্যবহার করে। লক্ষ্য করুন যে এই নিবন্ধের শুরুতে আমরা যে এইচটিএমএল তৈরি করেছি তাতে একটি রয়েছে "উদ্ধৃতি তৈরি করুন" বোতাম আমাদের যা করতে হবে তা হল ব্যবহার 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; });
});

এটি আমাদের অ্যাপ্লিকেশনে এলোমেলো উদ্ধৃতি পেতে সফলভাবে আমাদের সহায়তা করবে, তবে আমরা একটি পেতে চাই অ্যানিমেশন লোড হচ্ছে যাতে ব্যবহারকারী জানে যে আমরা বিষয়বস্তুর আশা করছি। এটি সম্পন্ন করার জন্য, আমরা দুটি পদ্ধতি তৈরি করব, একটি প্রদর্শন করার জন্য 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; });
});

উপসংহার

এই নিবন্ধে, আমরা শিখেছি কিভাবে ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে লোডিং অ্যানিমেশন তৈরি করতে হয় এবং যথাযথভাবে প্রদর্শন করতে হয়। আমরা এটি সম্পন্ন করার জন্য বিভিন্ন পন্থা বিবেচনা করেছি এবং লোডিং অ্যানিমেশনের জন্য কয়েকটি ভিন্ন ব্যবহারের ক্ষেত্রে দেখেছি। আমরা একটি লোডার হিসাবে ঘূর্ণায়মান বৃত্ত ব্যবহার করতে বেছে নিয়েছি, কিন্তু আপনি এটিকে আপনার পছন্দ মতো পরিবর্তন করতে পারেন - নির্দ্বিধায় নিজের তৈরি করুন জিআইএফ অথবা CSS অ্যানিমেটেড লোডার।

• Coinsmart. ইউরোপের সেরা বিটকয়েন এবং ক্রিপ্টো এক্সচেঞ্জ।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. বিনামূল্যে এক্সেস.
• ক্রিপ্টোহক। Altcoin রাডার। বিনামূল্যে ট্রায়াল.
• সূত্র: https://stackabuse.com/loading-animation-in-vanilla-javascript/