Pace - индикатор загрузки страницы
О, привет из 2013-го. Этой статье больше десяти лет, и с тех пор мир ушёл далеко вперёд. Сам Pace всё ещё работает, но проект давно заброшен, да и сама задача решается теперь совсем по-другому. Если вы зашли сюда за индикатором в 2026-м — вот короткая шпаргалка, куда смотреть. Полоска прокрутки (сколько страницы прочитано) теперь делается на чистом CSS вообще без JS — через animation-timeline: scroll(), работает нативно во всех современных браузерах, буквально пара строк. А индикатор загрузки страницы и переходов в SPA сейчас берут на BProgress (TypeScript, есть готовые пакеты под React, Vue и Next.js) — это прямой наследник тоже заброшенного NProgress. Ниже — оригинальный текст 2013 года, оставляю как есть для истории.
Все наверно уже видели индикатор загрузки на youtube. Нашёл в сети Pace - jQuery плагин, который позволяет очень просто добавить такой же на свой сайт.
Сайт и демо | Ссылка на github
Pace автоматически прослушивает все ajax запросы, загрузку DOM дерева и т.д. Поэтому для работы необходимо просто подключить js файл к странице, а так же добавить стили для полосы загрузки.
1234
<head>
<script src="/pace/pace.js"></script>
<link href="/pace/themes/pace-theme-barber-pole.css" rel="stylesheet" />
</head>
Более подробно читайте в документации: https://codebyzach.github.io/pace/docs/
Пример подключения на сайт индикатора загрузки страницы Pace
Разберём подробнее на примере подключение плагина на сайт. В общем виде, всё сводится к подключению плагина и css файла со стилями к странице и его инициализации с нужными параметрами. К плюсам можно отнести еще и отсутствие каких либо зависимостей в виде jQuery.
Итак, необходимо скачать:
- js файл плагина Pace
- css файл понравившейся темы pace.
От темы будет зависеть оформление и цвет индикатора. Это всё можно выбрать на главной странице официального сайта плагина Pace.
Далее, в коде страницы нужно подключить эти 2 файла. Всё! Плагин начинает работать. Вы можете его гибко сконфигурировать, о чем подробно написано в документации.