Загрузка… Анимация в ванильном JavaScript

Введение

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

В этом руководстве мы рассмотрим, как использовать ванильный 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> блоки — один для загрузчика и один для контента сайта.

Как было сказано ранее, значок загрузки может быть 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 загрузка в середине экрана, примерно так:

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

.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-код, который мы создали в начале этой статьи, имеет «Создать цитату» кнопка. Все, что нам нужно сделать, это использовать 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; });
});

Заключение

В этой статье мы узнали, как использовать обычный JavaScript для создания анимации загрузки и ее правильного отображения. Мы рассмотрели различные подходы к достижению этой цели и рассмотрели несколько вариантов использования анимации загрузки. Мы решили использовать вращающийся круг в качестве загрузчика, но вы можете изменить его по своему усмотрению — не стесняйтесь создавать свои собственные GIF или анимированный загрузчик CSS.

• Коинсмарт. Лучшая в Европе биржа биткойнов и криптовалют.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. БЕСПЛАТНЫЙ ДОСТУП.
• КриптоХок. Альткоин Радар. Бесплатная пробная версия.
• Источник: https://stackabuse.com/loading-animation-in-vanilla-javascript/