23 Июн 2023
2 мин
217

Как создать сайт с использованием прелоадеров для улучшения пользовательского опыта

Узнайте, как создать сайт с прелоадерами для улучшения пользовательского опыта и избавления от белого экрана при загрузке.

Содержание

Прелоадеры – это индикаторы загрузки, которые появляются на экране, пока основное содержимое сайта еще не загрузилось полностью. Они помогают улучшить пользовательский опыт, предотвращая появление белого экрана или неполностью загруженных элементов. В этой статье мы разберемся, как создать сайт с использованием прелоадеров.

Шаг 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.

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

Содержание

Добавить комментарий

Определи профессию по рисунку