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

(3 оценок, среднее: 5,00 из 5)

28.03.2020

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

Что нам потребуется сделать, чтобы исправить данную ситуацию и сделать красивую загрузку веб узла? Используем простой css preloader. Код привожу ниже.

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

HTML разметку вставляем после открывающего тега body. Скобки убраны, чтобы не ругался редактор worpdress.

div id=”preloader”
div id=”loader” /div
/div

CSS в теге style вставляем в head страницы. Это код отвечающий за красивый крутящийся прелоадер.

#preloader{background:#fff;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#34b652;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#34b652;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#34b652;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}.loaded_hiding #preloader{transition:.3s opacity;opacity:0}.loaded #preloader{display:none}

JS код в теге script вставляем перед закрывающим тегом body. Этим действием мы добавляем класс к тегу боди и меняем, когда страница загружена.
window.onload=function(){document.body.classList.add('loaded_hiding');window.setTimeout(function(){document.body.classList.add('loaded');document.body.classList.remove('loaded_hiding');},500);}

Результат

В итоге у вас должно получиться как на сайте нашего клиента https://lukles.ru/. Плюсы данного решния:

Не нагружает сайт, вы не заметите потери в скорости загрузки.
Вместе с тем, прелоадер скрывает некрасивую подгрузку блоков.
Можно использовать любой другой css прелоадер, будет работать аналогично.
Прелоадер будет работать в любой cms, WordPress, Modx, Opencart и так далее.

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

Также, если нужна небольшая доработка сайта, оставляйте контакт в форме снизу. Свяжемся и найдем решение. Спасибо за внимание!

Обратная связь

: прелоадер для сайта