Подробная инструкция о том как сделать 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, то могут быть конфликты.
Вот и всё!
Всем удачи и добра!

Последнее от Макс Пуля
- Сервер, проекты и ffmpeg
- Семантическое ядро сайта
- Хостинг на домашнем сервере Open Server, DDNS и динамический IP-адрес
- Input type date во всех браузерах
- Мой новый проект в AdSense
- Апелляция Google AdSense. Ответ на апелляцию AdSense
- Viewport мета тег
- Учетная запись AdSense отключена из-за недействительной активности
- Landing page - продвижение целевой страницы в сети
- Недопустимый трафик AdSense для контента