Прелоадеры – это индикаторы загрузки, которые появляются на экране, пока основное содержимое сайта еще не загрузилось полностью. Они помогают улучшить пользовательский опыт, предотвращая появление белого экрана или неполностью загруженных элементов. В этой статье мы разберемся, как создать сайт с использованием прелоадеров.
Шаг 1: Создание HTML-структуры
Для начала создадим основную структуру HTML-документа. Внутри тега <body> добавим блок с классом «preloader», который будет содержать нашу анимацию загрузки:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример сайта с прелоадером</title>
</head>
<body>
<div class="preloader"></div>
<!-- Основное содержимое сайта -->
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
Шаг 2: Создание анимации прелоадера
Теперь создадим анимацию для нашего прелоадера с помощью CSS. В этом примере мы будем использовать анимацию вращения:
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.preloader::before {
content: "";
width: 50px;
height: 50px;
border: 5px solid #007bff;
border-top-color: transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Шаг 3: Скрытие прелоадера после загрузки страницы
Чтобы прелоадер исчезал после полной загрузки страницы, используем небольшой скрипт на JavaScript:
window.addEventListener('load', function () {
const preloader = document.querySelector('.preloader');
setTimeout(function() {
preloader.style.opacity = '0';
setTimeout(function() {
preloader.style.display = 'none';
}, 1000);
}, 500);
});
Этот скрипт будет ждать, пока страница полностью загрузится, затем начнет анимацию исчезновения прелоадера и в конечном итоге удалять его из DOM.
Таким образом, мы создали сайт с использованием прелоадеров для улучшения пользовательского опыта. Прелоадер с анимацией загрузки будет показан, пока основное содержимое сайта не загрузится полностью, предотвращая появление белого экрана или неполностью загруженных элементов.
Добавить комментарий