Как сделать прелоадер для сайта
Подробная инструкция о том как сделать 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 type="text/javascript">
jQuery(document).ready(function(){
$("#preloader").fadeOut("slow");
});
</script>
Важно! Если у вас подключена другая версия jquery, то могут быть конфликты.
Вот и всё!
Всем удачи и добра!
Последнее от Макс Пуля
- Апелляция Google AdSense. Ответ на апелляцию AdSense
- Viewport мета тег
- Учетная запись AdSense отключена из-за недействительной активности
- Landing page - продвижение целевой страницы в сети
- Недопустимый трафик AdSense для контента
- Раскрывающийся блок со скрытым содержанием на JavaScript
- Плагин Hs Highlighter вставка и подсветка кода в контенте Joomla 3
- Всплывающее окно при закрытии страницы
- Вывод сайта в ТОП-1 Google и Yandex
- Решил сделать себе сайт