در حال بارگیری… انیمیشن در جاوا اسکریپت Vanilla

معرفی

هنگام توسعه وب‌سایت‌ها و برنامه‌های کاربردی وب، از جمله بارگذاری انیمیشن، می‌تواند تجربه کاربر را به طور قابل توجهی با برقراری ارتباط با آنچه در حال وقوع است، بهبود بخشد. این کار کاربران را درگیر می‌کند و توجه آنها را در حین بارگذاری محتوا حفظ می‌کند، و به کاربران کمک می‌کند به جای اینکه آنها را حدس بزنند بفهمند چه اتفاقی می‌افتد.

در این راهنما، نحوه استفاده از جاوا اسکریپت Vanilla برای ایجاد یک انیمیشن بارگیری را بررسی خواهیم کرد. ما با هر دو انیمیشن کار خواهیم کرد 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> بلوک ها – یکی برای لودر و دیگری برای محتوای وب سایت.

همانطور که قبلا گفته شد، نماد بارگیری می تواند یک باشد GIF، یک نماد متحرک ایجاد شده با CSS یا چیز دیگری. نکته مهمی که باید به خاطر داشته باشید این است که همین رویکرد برای هر نوع نماد بارگیری که استفاده می کنیم اعمال می شود.

ایجاد Loader با استفاده از 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 بارگذاری در وسط صفحه، مشابه این:

در این مرحله، ما آماده اجرای بارگیری با استفاده از جاوا اسکریپت هستیم. اما بیایید همچنین ببینیم که چگونه می‌توانیم از انیمیشن ساخته شده با CSS به جای a استفاده کنیم GIF، که برای وارد کردن به فایل اضافی نیاز ندارد.

ایجاد لودر با استفاده از CSS

ما دقیقاً همان نماد را با 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;
}

اکنون که دو نوع لودر متحرک موجود را دیدیم، بیایید از جاوا اسکریپت برای کنترل ظاهر شدن و ناپدید شدن این انیمیشن بارگیری استفاده کنیم.

نحوه پیاده سازی یک انیمیشن بارگیری با جاوا اسکریپت

جاوا اسکریپت به ما امکان می دهد ساختار HTML خود را دستکاری کنیم و آن را حذف یا مخفی کنیم loader-container که در حال حاضر نمایش داده می شود در مقابل محتوای وب سایت دو روش اصلی برای انجام این کار وجود دارد - فقط پنهان کردن loader-container، یا به طور کلی آن را حذف کنید.

هر رویکردی را که انتخاب کنید، اولین قدم استفاده از آن است querySelector() or getElementById() برای بازیابی loader-container تا بتوانیم آن را دستکاری کنیم:

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

در مرحله دوم، ما از آن استفاده خواهیم کرد eventListener برای گوش دادن به a load رویداد، به طوری که تابع callback را زمانی که 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 خارجی وضعیت دیگری است که ممکن است نیاز به گنجاندن یک لودر داشته باشد. واکشی و نمایش این نوع محتوا ممکن است مدتی طول بکشد، بنابراین بهتر است یک لودر اضافه کنید.

در مورد ما، بیایید سعی کنیم یک نقل قول از a quotes API با استفاده از Fetch API داخلی. توجه داشته باشید که HTML ما در ابتدای این مقاله ایجاد کرده ایم "ایجاد نقل قول" دکمه. تنها کاری که باید انجام دهیم این است که از آن استفاده کنیم document.querxySelector() روشی برای دریافت عنصر و ایجاد یک تابع callback برای مدیریت a 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';
};

در این مرحله، در نهایت می‌توانیم انیمیشن بارگذاری را در تابع callback قرار دهیم. هنگامی که واکشی شروع می شود، عملکرد پاسخ به تماس، انیمیشن بارگیری را نمایش می دهد و پس از دریافت داده، آن را پنهان می کند:

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.

• Coinsmart. بهترین صرافی بیت کوین و کریپتو اروپا.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی رایگان.
• CryptoHawk. رادار آلت کوین امتحان رایگان.
• منبع: https://stackabuse.com/loading-animation-in-vanilla-javascript/