Март 21, 2014
Собственный индикатор загрузки страницы
Существует множество способов придать сайту уникальности, сделать его особенным. Для этого мы постоянно совершенствуем дизайн сайта, добавляем новые возможности в функционал. Но одним из элементов, который выделит ваш сайт среди остальных — это индикатор загрузки страницы, собственный индикатор загрузки страницы. Как правило, страница не может загрузиться очень быстро, а в это время, пока страница загружается, можно вывести красивый индикатор загрузки.
Для создания индикатора загрузки мы будем использовать плагин Pace.js. Этот плагин предназначен для создания красивых индикаторов загрузки на вашем сайте. Полоса загрузки заполняется автоматически, используя AJAX запросы.
Скачать данный плагин можно — здесь.
Как установить индикатор загрузки на свой сайт?
1 шаг. Скачиваем данный плагин, разархивируем в папку, где у вас лежат все скрипты.
Затем подключаем данный плагин, вставляя данный плагин между тегами <head> </head>:
1 2 3 | <head> <script src="pace.min.js"></script> </head> |
2 шаг. Выбираем цвет индикатора загрузки.
Переходим по адресу — ссылка.
Там видим следующее поле для ввода:
Здесь в шестнадцатеричном виде вводим цвет, который подходит по цветовой гамме вашей теме. Советую для этого использовать программу ColorMania.
3 шаг. Выбираем стиль индикатора загрузки.
Спускаемся немного ниже и выбираем понравившийся индикатор загрузки.
Нажимаем по ссылке «Download» и увидите CSS код. Его необходимо скопировать и вставить в файл стилей вашей темы.
4 шаг. Вставляем одну строку Javascript.
Также между тегами <head> </head> вставляем следующий код:
1 | <script data-pace-options='{ "ajax": false }' src='pace.js'></script> |
Вывод
Pace.js поддерживает IE8+, FF 3.5+, Chrome, Safari 4 +, Opera 10.5 +, и все современные мобильные браузеры. Согласитесь, иметь собственную полосу загрузки, будет отличать ваш сайт от всех остальных.
Успехов!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
где брать pace.js?
3-й абзац статьи.
не работает в общем
Значит, вы делаете что-то не так.
Только вот эта строчка не нужна, с ней не пропадет индикатор
😉
Вот так работает
Как у них на сайте написано 😉
А дему не хочете показать?
llizard, ссылка на официальный сайт — Перейти.
Извените меня, я не внемательная растяпа! А я хотел спросить, на одном из скрине видно такой зеленый уголок справа сверху с круглым индикатором, а я только на ссылке нашол простй индикатор загрузки по центру. Либо я такой не внемательный, либо того что на скрине, на ссылке которую вы дали действительно нет?
Я так понял вы имеете в виду тип «Corner Indicator», он там есть, нужно прокрутить страницу намного ниже.
Ставим и проверяем, заменяем на своё. Всё работает
Привет Юрий и спасибо за этот ресурс.
У меня только один вопрос по этому топику ответ не который я не могу найти в документации.
Как сделать так что бы всё содержимое страницы показывалось только после полной загрузки.
Спасибо заранее за ответ.
Чтобы сделать это, нужно использовать jQuery. К примеру можно вот таким образом (разместить перед закрывающим тегом body):
<script>
$(function(){
$(".hidescreen, .load_page").fadeIn(10); // фон+индикатор
$(window).load(function() {
$(".hidescreen,.load_page").fadeOut(600); // скрываем фон+индикатор
});
});
</script>
где блок с классом hidescreen — это блок, который перекрывает весь сайт (например просто черный или белый), а блок с классом load_page содержит сам индикатор (или просто gif-анимацию загрузки).
P.S.: убедитесь в том, что подключена библиотека jQuery.
Библиотека подключена, но страницу все равно видно
body > :not(.pace),body:before,body:after {
-webkit-transition:opacity .4s ease-in-out;
-moz-transition:opacity .4s ease-in-out;
-o-transition:opacity .4s ease-in-out;
-ms-transition:opacity .4s ease-in-out;
transition:opacity .4s ease-in-out
}
body:not(.pace-done) > :not(.pace),body:not(.pace-done):before,body:not(.pace-done):after {
opacity:0
}
Блестяще! И не надо никакого jQuery! Спасибо!
Ставил на один сай, потом убрал — очень грузит сайт, страницы долго загружаются. А когда открываешь несколько страниц сайта, то индикатор загрузки вообще зависает. Одним словом, вполне возможно , что это только у меня такая «засада», так что в качестве эксперемента, пожалуй, попробывать вполне можно. 😮
Большое спасибо, все работает!
Сделал что так как написано, но не работает. Можете мне помочь?
Добрый день. Что конкретно не работает? Какие ошибки выдает?
Исправил все работает спасибо вам большое за отзыв
Здравствуйте!
У вам в 1 шаге указан pace.min.js, а в шаге 2 уже pace.js.
В итоге ничего непонятно, где брать pace.js, если вы даете скачать только pace.min.js.
Это два разных скрипта или один и тот же?
В итоге сделал что скрипт загружается сразу из http://github.hubspot.com/pace/docs/welcome/.
Здравствуйте, Олег!
Pace.min.js — это сжатая версия библиотеки pace.js.
не работает dle 10.5
Это не плагин для CMS, а JS плагин, который нужно лишь правильно подключить.