Pace.js - автоматический индикатор загрузки страницы для сайта с отслеживанием ajax-запросов и состояния загрузки страницы (readyState).

Скрипт не требует первоначальной настройки, для работы Pace достаточно подключить сам скрипт pace.min.js и подходящую css-тему  и он заработает! 

Инструкция по установке и настройке Pace

Скачиваем скрипт с официальной странички Pace, причем обратите внимание на опцию выбора цвета для загрузчика, в формате #HEX, т.е. вы можете скачать скрипт в подходящем для вашего сайта цвете.

pace-theme-minimal.css

Распаковываем архив, видим папки с доками, шаблонами, темами и сам скрипт - pace.min.js в сжатом и pace.js исходном виде.

pace.js

Здесь нам нужны два файла - pace.min.js и любая из тем, я взял /themes/pace-theme-minimal.css
Копируем их в свой проект (сайт) и подключаем, например так:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Пример подключения скррипта Pаce</title>
	<link rel="stylesheet" href="css/pace-theme-minimal.css">
	<script src="js/pace.min.js"></script>
</head>
<body>

</body>
</html>

После подключения скрипт в действии с темой pace-theme-minimal.css выглядит так:

Pace - автоматический индикатор загрузки страницы

Теперь можете поиграться с шаблонами из папки templates или попробуйте создать свои шаблоны или темы, самыми удачными можете поделиться с автором, может быть его опубликуют на страничке скрипта.

Pace поддерживает IE8 + (стандартный режим), FF 3.5 +, Chrome, Safari 4 +, Opera 10.5 +, и все современные мобильные браузеры.

Также есть небольшое API для разработчиков, что также очень хорошо:

Размер pace.js равен 4 КБ в уменьшенном и gzip - сжатом виде. Размер тем варьируется между 0,5 и 4 КБ.

Также есть поддержка скрипта на github.com в случае возникновения проблем.


Вернуться в список