Существует множество способов придать сайту уникальности, сделать его особенным. Для этого мы постоянно совершенствуем дизайн сайта, добавляем новые возможности в функционал. Но одним из элементов, который выделит ваш сайт среди остальных — это индикатор загрузки страницы, собственный индикатор загрузки страницы. Как правило, страница не может загрузиться очень быстро, а в это время, пока страница загружается, можно вывести красивый индикатор загрузки.
Для создания индикатора загрузки мы будем использовать плагин 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 +, и все современные мобильные браузеры. Согласитесь, иметь собственную полосу загрузки, будет отличать ваш сайт от всех остальных.