Вашему веб-сайту может потребоваться немного больше времени для загрузки всего содержимого, независимо от того, насколько легкие или быстрые ваши страницы. Есть и другие факторы, влияющие на этот фактор, например, плохое подключение посетителей вашего сайта к Интернету. Наличие на экране полностью пустой веб-страницы в ожидании загрузки веб-сайта - утомительное занятие для посетителей. Здесь в игру вступает предварительный загрузчик CSS.

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

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

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

(Желаемая анимация предварительного загрузчика может отличаться, но процесс для этого почти одинаков. Мы даем вам пример того, как вы можете внести изменения, чтобы разместить желаемую анимацию предварительного загрузки на вашем сайте.)

1. Добавьте следующий фрагмент кода в файл index.html прямо под тегом body.

<div class="pre-loader"> <div class="sk-fading-circle"> <div class="sk-circle1 sk-circle"></div> <div class="sk-circle2 sk-circle"></div> <div class="sk-circle3 sk-circle"></div> <div class="sk-circle4 sk-circle"></div> <div class="sk-circle5 sk-circle"></div> <div class="sk-circle6 sk-circle"></div> <div class="sk-circle7 sk-circle"></div> <div class="sk-circle8 sk-circle"></div> <div class="sk-circle9 sk-circle"></div> <div class="sk-circle10 sk-circle"></div> <div class="sk-circle11 sk-circle"></div> <div class="sk-circle12 sk-circle"></div> </div></div>

2. Откройте файл CSS и добавьте туда эти коды CSS.

.pre-loader { background-color: #2c3e50; position: fixed; height: 100%; width: 100%; left: 0; top: 0;}.sk-fading-circle { margin: 100px auto; width: 40px; height: 40px; position: relative;}.sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}.sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #fff; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;}.sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg);}.sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg);}.sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}.sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg);}.sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg);}.sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}.sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg);}.sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg);}.sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg);}.sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg);}.sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg);}.sk-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s;}.sk-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s;}.sk-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s;}.sk-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s;}.sk-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s;}.sk-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s;}.sk-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s;}.sk-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s;}.sk-fading-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s;}.sk-fading-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s;}.sk-fading-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s;}@-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; }}@keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; }}

3. Добавьте следующий фрагмент кода jQuery в свой файл JS.

(function($){ 'use strict'; $(window).on('load', function () { if ($(".pre-loader").length > 0) { $(".pre-loader").fadeOut("slow"); } });

})(jQuery)

Если вы точно выполнили каждый шаг, ваш прелоадер сразу же начнет работать. Посетите свой веб-сайт, чтобы проверить.

Вот как это будет выглядеть

Возможные источники в Интернете для получения таких кодов CSS:

Благодарим SpinKit за некоторые коды.

Нам очень нравится, когда вы здороваетесь в Twitter или Facebook!