Давно мы хотели рассказать о такой фиче но никак не доходили руки. Сегодня, видать, настал тот день когда админ вышел из запоя и решил выдать то о чем долго думал. Речь пойдет о создании прогресс бара, который будет показывать на сколько пользователь пролистал страницу информируя его при этом датчиком прогресса с указанием процентов. Такой прием носит больше декоративный характер, как раньше любили вставлять часы и календарики на сайт, но постараемся не отставать от моды и показать как сделать такой бар у себя на сайте.

 

Для себя я мало находил полезным такой бар, но со мной не все согласятся. Вы сможете использовать его для отображения прогресса прочтения новости на странице ну или чего-то там еще, прикрутить такой Progress Bar можно к чему угодно по сути. Бесплатные шаблоны от наших партнеров:

Шаг 1. HTML

Здесь все достаточно просто, у нас будет всего несколько строчек кода, у нас будет общий контейнер с классом, в котором содержаться все элементы прогресс бара:

Класс progress-label будет отвечать за отображение процентов на странице, а само значение progress за линию-индикатор при прокрутке рядом с процентами.

Шаг 2. CSS

Стилей, как по сути, у нас и нет. Единственное, нам необходимо украсить полосу которая будет заполняться при прокрутке:

Вся магия будет заключаться именно в JavaScrip’те, по этому давайте перейдем к следующему шагу.

Шаг 3. JS

Нам необходимо, чтобы функция JavaScript вычисляла всю длину страницы и отображала ее в progress и progress-label, для этого у нас будет фот такая функция:

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

Вот и все. Готово!