Прелоадер для сайта

Когда сайт будет полностью загружен, тогда прелоадер исчезнет и пользователь увидит сайт.

В файле HTML создадим два div»a — обёртку для прелоадера и сам прелоадер.

<div id="myPreloader" class="wrap-myLoader">
     <div class="myLoader"></div>
</div>

Стилизуем блок-обёртку для прелоадера. Растянем блок wrap-myLoader на весь экран, выберем цвет фона, z-index (чтобы всегда был сверху), opacity и visible в дальнейшем уберём с помощью js.

.wrap-myLoader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #424242;
    z-index: 51;
    transition: 1s all;
    opacity: 1;
    visibility: visible;
}

Стили для самого прелоадера. Спозиционируем его ровно по центру, зададим высоту и ширину. Раскрасим его стороны в белый цвет, а одну сторону в зелёный. С помощью border-radius сделаем из квадрата круг.

Также создадим класс .done — будем добавлять его к обёртке прелоадера после полной загрузки всех элементов. Он будет скрывать наш прелоадер.

.myLoader {
    position: absolute;
    left: 49%;
    top: 49%;
    transform: translate(-49%, -49%);
    width: 76px;
    height: 76px;
    border: 10px solid white;
    border-top-color: #0ca70c;
    border-radius: 50%;
}
.cansel {
    opacity: 0;
    visibility: hidden;
}

Создадим ключевые кадры анимации для прелоадера.

@keyframes myAnim {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

Зададим свойства анимации: длительность — 1 секунда (т.е. от from до to круг будет пройден за 1 с), скорость анимации — равномерно, повтор анимации — бесконечность.

animation: 1s myAnim linear infinite;

Весь CSS:

.wrap-myLoader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #424242;
    z-index: 51;
    transition: 1s all;
    opacity: 1;
    visibility: visible;
}

.myLoader {
    position: absolute;
    left: 49%;
    top: 49%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border: 10px solid white;
    border-top-color: #0ca70c;
    border-radius: 50%;

    animation: 1s myAnim linear infinite;
}

.cansel {
    opacity: 0;
    visibility: hidden;
}

@keyframes myAnim {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

JS-код: после полной загрузки страницы элементу с идентификатором myPreloader будет добавляться класс done, который будет скрывать наш прелоадер. Так же зададим значение в миллисекундах через сколько скрывать прелоадер (например, через пол секунды).

document.body.onload = function() {
    setTimeout(function() {
        var preloader = document.getElementById("myPreloader");
        if (!preloader.classList.contains("cansel")) {
            preloader.classList.add("cansel");
        }
    }, 499)
};
Кнопка наверх для сайта