Введение
Этот текст нужен только для демонстрации работы скрипта прогресс-бара на сайте со статьями. Скрипт считает проскролленную часть страницы в процентах, показывает, сколько ориентировочно осталось до конца, и оценивает время чтения по количеству слов.
Как это устроено
Полоса прогресса закреплена сверху страницы и заполняется по мере прокрутки. В блоке под ней выводятся: текущий процент прочтения, общее ориентировочное время чтения статьи и оставшееся время до конца. Расчёт времени основан на среднем темпе чтения (слов в минуту), который можно задать в настройках.
Универсальность
Скрипт не привязан к конкретной вёрстке: он работает с любым контентом в теле страницы или внутри указанного контейнера. Все классы имеют уникальный префикс, чтобы не пересекаться со стилями вашего сайта. Цвета, размеры и отображение блоков можно менять через CSS-переменные или параметры при инициализации.
Дополнительные возможности
В конфигурации можно включить или отключить отображение общего времени чтения, оставшегося времени и количества слов. Можно указать селектор контейнера статьи, чтобы считать только текст внутри него, задать минимальную высоту контента для показа времени и настроить поведение полосы (например, скрывать её в самом верху страницы).
Интеграция на сайт
Подключите на страницу со статьями файлы progress-bar.css и progress-bar.js. В конце body или после блока с контентом вызовите конструктор ArticleReadProgressBar и при необходимости передайте объект с настройками. Селектор контента задаётся параметром contentSelector: укажите CSS-селектор основного блока статьи (например, article или .post-content), чтобы время чтения считалось только по этому блоку. Если не указывать contentSelector, скрипт будет считать слова по всему body.
Настройка внешнего вида
Все визуальные параметры задаются через CSS-переменные с префиксом --arpb-. Их можно переопределить в своей таблице стилей или в отдельном блоке style после подключения progress-bar.css. Доступны переменные для высоты и цвета полосы, фона и текста блока статистики, размера шрифта, отступов и скруглений. Так вы сможете вписать виджет в дизайн любого сайта без правки исходных файлов скрипта.
Заключение
Установка сводится к подключению одного CSS- и одного JS-файла и вызову инициализации с нужными параметрами. Подробная инструкция и список настроек описаны в файле readme.txt.