لوڈ ہو رہا ہے… ونیلا جاوا اسکرپٹ میں اینیمیشن

تعارف

ویب سائٹس اور ویب ایپلیکیشنز کو تیار کرتے وقت، بشمول لوڈنگ اینیمیشن جو کچھ ہو رہا ہے اس سے بات کر کے صارف کے تجربے کو نمایاں طور پر بہتر بنا سکتا ہے۔ یہ صارفین کو مشغول کرتا ہے اور مواد کو لوڈ کرتے وقت ان کی توجہ رکھتا ہے، اور یہ صارفین کو اندازہ لگانے کے بجائے یہ سمجھنے میں مدد کرتا ہے کہ کیا ہو رہا ہے۔

اس گائیڈ میں، ہم دیکھیں گے کہ لوڈنگ اینیمیشن بنانے کے لیے ونیلا جاوا اسکرپٹ کو کیسے استعمال کیا جائے۔ ہم دونوں اینیمیٹڈ کے ساتھ کام کریں گے۔ GIFs اور 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 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;
}

جب ہم ابھی اپنا ویب صفحہ لوڈ کریں گے، تو ہمیں ایک سیاہ پس منظر نظر آئے گا۔ GIF اسکرین کے وسط میں لوڈ ہو رہا ہے، اس کی طرح:

اس وقت، ہم جاوا اسکرپٹ کا استعمال کرتے ہوئے لوڈنگ کو نافذ کرنے کے لیے تیار ہیں۔ لیکن آئیے یہ بھی دیکھتے ہیں کہ ہم سی ایس ایس کی تخلیق کردہ اینیمیشن کو a کے بجائے کس طرح استعمال کر سکتے ہیں۔ GIFجس کو درآمد کرنے کے لیے اضافی فائل کی ضرورت نہیں ہے۔

سی ایس ایس کا استعمال کرتے ہوئے لوڈر بنائیں

ہم CSS کے ساتھ بالکل وہی آئیکن بنائیں گے۔ یاد رکھیں، ہم نے ایک اضافی div بنایا (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 div کو مرکز میں استعمال کر سکتے ہیں اور سیاہ پس منظر کو شامل کر سکتے ہیں جیسا کہ ہم نے پہلے کیا تھا:

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

اب جب کہ ہم نے دو قسم کے اینیمیٹڈ لوڈرز دستیاب دیکھ لیے ہیں، آئیے یہ کنٹرول کرنے کے لیے JavaScript کا استعمال کریں کہ یہ لوڈنگ اینیمیشن کب ظاہر ہوتا ہے اور غائب ہوتا ہے۔

جاوا اسکرپٹ کے ساتھ لوڈنگ اینیمیشن کو کیسے نافذ کیا جائے۔

JavaScript ہمیں اپنے HTML ڈھانچے میں ہیرا پھیری کرنے اور اسے ہٹانے یا چھپانے کی اجازت دیتا ہے۔ 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 بلٹ ان Fetch API کا استعمال کرتے ہوئے غور کریں کہ ہم نے اس مضمون کے شروع میں جو 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; });
});

یہ ہماری درخواست میں بے ترتیب قیمت درج کرنے میں کامیابی کے ساتھ ہماری مدد کرے گا، لیکن ہم چاہیں گے کہ ایک حرکت پذیری لوڈ ہو رہی ہے۔ تاکہ صارف کو معلوم ہو کہ ہم مواد کی توقع کر رہے ہیں۔ اس کو پورا کرنے کے لیے، ہم دو طریقے بنائیں گے، ایک کو ظاہر کرنے کے لیے 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 Metaverse انٹیلی جنس۔ علم میں اضافہ۔ مفت رسائی۔
• کرپٹو ہاک۔ Altcoin ریڈار. مفت جانچ.
• ماخذ: https://stackabuse.com/loading-animation-in-vanilla-javascript/