Завантаження… Анімація в Vanilla JavaScript

Вступ

Під час розробки веб-сайтів і веб-додатків включення анімації завантаження може значно покращити взаємодію з користувачем, повідомляючи про те, що відбувається. Це залучає користувачів і утримує їхню увагу під час завантаження вмісту, а також допомагає користувачам зрозуміти, що відбувається, а не залишати їх у здогадах.

У цьому посібнику ми розглянемо, як використовувати Vanilla JavaScript для створення анімації завантаження. Ми будемо працювати з обома анімованими 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;
}

Коли ми зараз завантажуємо нашу веб-сторінку, ми побачимо чорний фон із a GIF завантаження в центрі екрана, подібне до цього:

На цьому етапі ми готові реалізувати завантаження за допомогою JavaScript. Але давайте також подивимося, як ми можемо використовувати анімацію, створену за допомогою 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, для якої ми тепер можемо використовувати div контейнера завантажувача, щоб відцентрувати та додати чорний фон, як ми це робили раніше:

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

Тепер, коли ми побачили два типи доступних анімованих завантажувачів, давайте скористаємось JavaScript, щоб контролювати, коли ця анімація завантаження з’являється та зникає.

Як реалізувати анімацію завантаження за допомогою 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-елементів із JavaScript, а наведений нижче код вказує, що ми встановлюємо контейнер завантажувача 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() метод для отримання елемента та створення функції зворотного виклику для обробки 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';
};

На цьому етапі ми нарешті можемо включити анімацію завантаження у функцію зворотного виклику. Коли почнеться вибірка, функція зворотного виклику відобразить анімацію завантаження та приховає її після отримання даних:

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; });
});

Висновок

У цій статті ми навчилися використовувати ванільний JavaScript для створення анімації завантаження та належного її відображення. Ми розглянули різні підходи для досягнення цього та поглянули на кілька різних варіантів використання анімації завантаження. Ми вирішили використовувати круг, що обертається, як завантажувач, але ви можете змінити його як завгодно – можете створити власний GIF або анімований завантажувач CSS.

• Coinsmart. Найкраща в Європі біржа біткойн та криптовалют.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. БЕЗКОШТОВНИЙ ДОСТУП.
• CryptoHawk. Альткойн Радар. Безкоштовне випробування.
• Джерело: https://stackabuse.com/loading-animation-in-vanilla-javascript/