Как отобразить индикатор выполнения прокрутки на вашем сайте, используя PrognRoll и jQuery в JavaScript

Вы когда-нибудь были на сайте, где прокрутка кажется бесконечной, и вы читаете и читаете, а документ просто не останавливается? В последнее время многие веб-сайты (в основном страницы, на которых публикуются длинные статьи) начали реализовывать своего рода индикатор, отображаемый в индикаторе выполнения, расположенном в верхней части документа, который обновляется при прокрутке пользователя вниз. Прогресс зависит от того, насколько далеко вы прокрутили статью, довольно просто и круто, не так ли? Это помогает пользователю узнать, как далеко он закончил публикацию. Многие дизайнеры говорят, что индикатор выполнения вверху полезен и сочетается с дизайном веб-страницы, однако разработчики считают эту функцию бесполезной, потому что уже есть полоса прокрутки, прогресс которой почти такой же, как на вершина. На какой ты стороне?

Если вы ищете реализацию такой функции на своем веб-сайте с помощью плагина jQuery, то вы попали по адресу. В этой статье мы собираемся объяснить, как использовать плагин jQuery PrognRoll для создания этого индикатора в окне.

Скачайте и включите PrognRoll

PrognRoll это небольшой, легкий плагин jQuery, который создает полосу прокрутки на странице. Его использование и настройка довольно просты, и он весит всего 966 байт, что делает его более привлекательным.

Чтобы использовать PrognRoll, загрузите файл с исходным кодом или сверните в хранилище. Затем добавьте ссылку на скрипт с тегом script:

Как видите, для PrognRoll требуется только файл скрипта, а настройку (ширину и цвет фона индикатора выполнения) можно выполнить напрямую с помощью JavaScript.

Если вы хотите протестировать библиотеку, вы можете просто использовать CDN:

Для дополнительной информации, Посетите официальный репозиторий проекта в Github здесь.

Использование PrognRoll

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

Индикатор выполнения в документе

Чтобы создать индикатор выполнения прокрутки во всем документе, просто выберите элемент body документа с помощью jQuery и инициализируйте плагин на нем:

$("body").prognroll({
//Progress bar height
height: 5,
//Progress bar background color
color: "#03a9f4",
// If you make it true, you can add your custom div and see it's scroll progress on the page
custom: false
});

Индикатор выполнения в пользовательском элементе

Если вместо измерения хода выполнения всего документа вы можете показать ход выполнения пользовательского элемента, выбрав свой элемент с помощью jQuery, а затем примените к нему плагин. Не забудьте установить custom свойство к истине:

$(".custom-element").prognroll({
//Progress bar height
height: 5,
//Progress bar background color
color: "#03a9f4",
// Using custom element instead of the body
custom: true
});