Як додати анімацію завантаження (preloader) на сайт
Під час завантаження «важкого» контенту — високороздільних зображень, кастомних шрифтів або скриптів аналітики — користувач часто бачить напівпорожній екран зі зламаною версткою (Layout Shift). Це створює відчуття повільної роботи ресурсу та погіршує досвід користувача (UX).
Прелоадер (Preloader / Loading screen) — це елемент інтерфейсу, який перекриває вміст сторінки на час рендерингу ресурсов та інформує відвідувача про процес завантаження. Створення якісного завантажувача не вимагає важких JS-бібліотек чи плагінів — усе це легко реалізується за допомогою кількох рядків HTML, плавної CSS-анімації та чистого Vanilla JS.
1. Навіщо потрібен прелоадер та які бувають типи
Головне завдання екрана завантаження — зменшити суб’єктивний час очікування (Perceived Performance). Коли користувач бачить анімацію, мозок сприймає затримку як контрольований процес, а не як збій системи.
У сучасній веб-розробці використовуються три основні підходи до анімації завантаження:
- Full-screen Spinner (Класичний екранний спінер): Перекриває всю сторінку оверлеєм із центрованим крутильним елементом. Найкраще підходить для сайтів із великою кількістю медіа-контенту чи промо-лендінгів.
- Progress Bar (Індикатор прогресу у верхній частині): Тонка смужка у верхній частині екрана (як у YouTube або Telegram), яка заповнюється в міру завантаження сторінки.
- Skeleton Screens (Каркасна анімація): Показ сірих блоків-заглушок, що формою повторюють майбутній контент. Найбільш сучасний підхід для складної динамічної веб-розробок (
Vue,Nuxt,React).
2. Порівняльний аналіз типів завантажувачів
| Тип прелоадера | Переваги | Сфера застосування |
|---|---|---|
| Full-screen Overlay | Повністю приховує процес скачування важких елементів та FOUT/FOIT шрифтів. Простий у реалізації. |
Промо-сайти, фотогалереї, корпоративні ресурси з великими банерами. |
| Progress Bar | Мінімалістичний, не перекриває контент, не дратує при повторних переходах. | Інтернет-магазини, багатосторінкові блоги, новинні портали. |
| Skeleton Screen | Максимальний рівень UX: створює відчуття, що контент завантажується миттєво. | Веб-додатки (SPA/PWA), особисті кабінети, каталоги товарів із AJAX-фільтрацією. |
3. Покрокова реалізація класичного прелоадера (практика)
Реалізуємо повноекранний прелоадер із апаратно прискореною CSS-анімацією та обробкою події завантаження у Vanilla JS.
Крок 1: HTML-структура
Розмістіть цей блок одразу після відкриваючого тегу <body>, щоб він рендерився першим:
<div id="page-preloader" class="preloader">
<div class="spinner"></div>
</div>
Крок 2: CSS-стилі та анімація
Використовуємо CSS-властивості transform та opacity, які обробляються графічним процесором (GPU), не викликаючи повторного Reflow/Repaint сторінки:
/* Оверлей на весь екран */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
/* Спінер завантаження */
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Анімація обертання */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Стан прихованості */
.preloader--hidden {
opacity: 0;
visibility: hidden;
}
Крок 3: Скрипт Vanilla JS
Ми використовуємо подію window.addEventListener('load'), яка спрацьовує тільки тоді, коли завантажився весь DOM, стилі, зображення та шрифти. Також додаємо страховий таймаут (Fallback Timeout) на випадок зависання зовнішніх ресурсів:
document.addEventListener('DOMContentLoaded', () => {
const preloader = document.getElementById('page-preloader');
const hidePreloader = () => {
if (preloader && !preloader.classList.contains('preloader--hidden')) {
preloader.classList.add('preloader--hidden');
// Видаляємо з DOM після завершення CSS-переходу для звільнення пам'яті
preloader.addEventListener('transitionend', () => {
preloader.remove();
}, { once: true });
}
};
// Приховуємо прелоадер після повного завантаження всіх ресурсів
window.addEventListener('load', hidePreloader);
// Страховий таймер (Fallback): якщо якась картинка зависла, приховуємо прелоадер через 5 секунд
setTimeout(hidePreloader, 5000);
});
Фронтенд-порада розробника: Завжди дбайте про продуктивність та крайні випадки (edge cases). По-перше, обов’язково видаляйте елемент прелоадера з DOM-дерева через
.remove()після завершення анімації приховування, щоб він не споживав оперативну пам’ять і не перехоплював кліки. По-друге, переконайтеся, що на час роботи прелоадера на тегуbodyне залишаєтьсяoverflow: hidden, інакше прокрутка сайту може виявитися заблокованою при помилках завантаження.
Коментарі
Коментарів ще немає.
Залишити коментар на основній сторінці