Создайте индикатор прогресса с помощью Pace.js

2014-07-18 0 ∞

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

При подключении к перегруженному серверу пользователь зачастую вынужден ожидать ответа, не имея понятия о том, когда же загрузка, наконец, завершится. Индикатор прогресса существенно повышает удобство пользования сайтом и придаёт ему профессиональный вид.

Разумеется, на время ожидания можно отвлечь пользователя при помощи CSS-анимации, но этому приёму не хватает наглядности. Благо, существует JavaScript-библиотека под названием Pace.js (Progress Automatically Certain to Entertain). Это легковесная библиотека состоит из привлекательного индикатора прогресса и навигационных элементов AJAX.

Что же такого замечательного в Pace.js?

Что же такого замечательного в Pace.js?

индикатор прогресса автоматически подключается к каждой странице вашего сайта;
работа Pace.js основана на состоянии готовности документа (Document.readyState), цикле событий и AJAX-запросах внутри определённых элементов веб-страниц;
на момент написания этой статьи имеется выбор из 14 встроенных тем;
состояние загрузки (прогресс) определяется автоматически.

В этой статье я покажу, как вы можете использовать этот удивительный плагин на вашем сайте:

Демонстрация работы Pace.js.

Для работы нам понадобятся:

любое изображение для фона;
Pace.js.

Это просто! Главное – начать!

Подключить Pace.js на удивление просто. Просто включите скрипт и CSS-файл с выбранной темой в загрузку вашей страницы. jQuery не требуется!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Создайте собственный прогресс-бар с помощью Pace.js</title>
    <script src="js/pace.js"></script>
    <link href="css/pace-theme-corner-indicator.css" rel="stylesheet">
</head>

Настройка

Pace.js работает автоматически. Я имею в виду, что его не нужно настраивать после подключения, чтобы он начал работать. Но вы можете задействовать тонкую настройку параметров этой библиотеки, когда захотите.

Два способа настройки

1. Установить window.paceOptions перед тем, как задействовать ссылки на странице:

paceOptions = {
  // Запретить источник 'elements'
  elements: false,
  // Показывать прогресс загрузки только обычных и AJAX'овых,
  // страниц, а не всех подряд
  restartOnRequestAfter: false
}

2. Задать опции в тэге <script>:

<script data-pace-options='{ "ajax": false }' src='pace.js'></script>

Изменение цвета индикатора

Вы можете также изменить цвета, задействованные в темах. Это можно сделать двумя способами:

1. На странице кастомизации темы Pace.js;
2. Просто отредактировав значения цвета фона и рамки в файле стилей.

Подводим итог

Вот и всё. Действительно просто, не так ли?

Существуют и другие индикаторы прогресса. Например, основанные на jQuery ProBars или Progress.js.

Но, я считаю, что ни один индикатор не может превзойти Pace.js по простоте и удобству использования. Это настоящий plug-and-play: никаких настроек не требуется, и батарейки идут в комплекте. Как обычно, вы можете выразить поддержку или возражения в комментариях.