Pace - индикатор загрузки страницы

Все наверно уже видели индикатор загрузки на youtube. Нашёл в сети Pace - jQuery плагин, который позволяет очень просто добавить такой же на свой сайт.

Сайт и демо | Ссылка на github

Pace автоматически прослушивает все ajax запросы, загрузку DOM дерева и т.д. Поэтому для работы необходимо просто подключить js файл к странице, а так же добавить стили для полосы загрузки.

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-pole.css" rel="stylesheet" />
</head>

Более подробно читайте в документации: http://github.hubspot.com/pace/

Пример подключения на сайт индикатора загрузки страницы Pace

Разберём подробнее на примере подключение плагина на сайт. В общем виде, всё сводится к подключению плагина и css файла со стилями к странице и его инициализации с нужными параметрами. К плюсам можно отнести еще и отсутствие каких либо зависимостей в виде jQuery.

Итак, необходимо скачать:

  • js файл плагина Pace
  • css файл понравившейся темы pace.

От темы будет зависеть оформление и цвет индикатора. Это всё можно выбрать на главной странице официального сайта плагина Pace.

Далее, в коде страницы нужно подключить эти 2 файла. Всё! Плагин начинает работать. Вы можете его гибко сконфигурировать, о чем подробно написано в документации.