Прелоадер — это элемент, который появляется на экране при загрузке контента, сообщая пользователям о том, что процесс загрузки идет. Данный скрипт позволит добавить на ваш сайт красивый и стильный прелоадер.
Создайте блок на вашей странице и добавьте в него изображение, которое будет использоваться в
качестве прелоадера.
Добавьте следующий CSS-код, который скроет изображение до тех пор, пока не начнется процесс загрузки страницы:
Создайте блок на вашей странице и добавьте в него изображение, которое будет использоваться в
качестве прелоадера.
Добавьте следующий CSS-код, который скроет изображение до тех пор, пока не начнется процесс загрузки страницы:
.preloader {
display: none;
}
Добавьте следующий код JavaScript, который покажет прелоадер при загрузке страницы и скроет его, когда страница полностью загрузится:
window.addEventListener('load', function () {
var preloader = document.querySelector('.preloader');
preloader.classList.add('hide-preloader');
});
Добавьте следующий CSS-код, который анимирует прелоадер:
.preloader:not(.hide-preloader) {
display: block;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #fff;
z-index: 9999;
}
.preloader:not(.hide-preloader) img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.hide-preloader {
opacity: 0;
visibility: hidden;
transition: opacity .5s, visibility .5s;
}
Теперь вы можете использовать этот скрипт для добавления красивого прелоадера на ваш сайт. Помните, что использование прелоадера может помочь улучшить пользовательский опыт и снизить показатели отказов на вашем сайте.