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

Понедельник, 18 Июнь 2018 16:17

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

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

размер шрифта уменьшить размер шрифта увеличить размер шрифта
Печать
Эл. почта
Поделитесь с друзьями этой статьей!
Станьте первым комментатором!

Оцените материал

(11 голосов)

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

Подробная инструкция о том как сделать 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.

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

Скрипт:

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

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

Вот и всё!

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

Прочитано 202 раз

Рекомендуемое: