Все наверно уже видели индикатор загрузки на 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 файла. Всё! Плагин начинает работать. Вы можете его гибко сконфигурировать, о чем подробно написано в документации.