Как сделать прелоадер для сайта

Автор Макс Пуля

Подробная инструкция о том как сделать preloader (прелоадер) у себя на сайте.

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

Сейчас мы будем рассматривать как сделать прелоадер у себя на сайте на примере моего. Поехали!

Инструкция

1. В действующий файл css нужно добавить код:

#preloader {
background-color: #fff;
position: fixed;
width: 100%;
height: 100%;
z-index: 9999;
}

.log {
z-index: 99999;
width: 110px;
margin: auto;
position: relative;
top: 35%;
}

.loader {
width: 250px;
height: 50px;
line-height: 50px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: helvetica, arial, sans-serif;
text-transform: uppercase;
font-weight: 900;
color: #000000;
letter-spacing: 0.2em;
}
.loader::before, .loader::after {
content: "";
display: block;
width: 15px;
height: 15px;
background: #000000;
position: absolute;
-webkit-animation: load .7s infinite alternate ease-in-out;
animation: load .7s infinite alternate ease-in-out;
}
.loader::before {
top: 0;
}
.loader::after {
bottom: 0;
}

@-webkit-keyframes load {
0% {
left: 0;
height: 30px;
width: 15px;
}
50% {
height: 8px;
width: 40px;
}
100% {
left: 235px;
height: 30px;
width: 15px;
}
}

@keyframes load {
0% {
left: 0;
height: 30px;
width: 15px;
}
50% {
height: 8px;
width: 40px;
}
100% {
left: 235px;
height: 30px;
width: 15px;
}
}

Весь код можете скачать по этой ссылке.

2. После тега <body> нужно добавить код прелоадера:

<div id="preloader">
<div class="log"><img src="https://epicblog.net//templates/tx_zmash/images/logo.png"></div>
<div class="loader">Загрузка…</div>
</div>

3. Если ваш браузер сохраняет кеш, его нужно очистить, так как мы вносили изменения в css файл.

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

Библиотека (если она у вас не подключена):

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

Скрипт:

<script>
jQuery(window).load(function(){
$("#preloader").fadeOut("slow");
});
</script>

В моём случае, я использовал другой код, потому что кнопка "Нравится" от Фэйсбука очень долго загружается. Этот код, не ждет загрузки всей страницы:

<script>
jQuery(document).ready(function(){
$("#preloader").fadeOut("slow");
});
</script>

Важно! Если у вас подключена другая версия jquery, то могут быть конфликты.

Вот и всё!

Всем удачи и добра!

Опубликовано в Веб-разработки

Теги

Макс Пуля

Приветствую! Присоединяйтесь к сообществу Epic Blog и выражайте свои мысли.

Эпик Блог

Эпик Блог

Мнение подобно костям —
у каждого свои