================================================================================ ARTICLE READ PROGRESS BAR (ARPB) — Универсальный прогресс-бар для статей ================================================================================ Скрипт показывает вверху (или внизу) страницы: • полосу прогресса прокрутки (сколько процентов проскроллено); • ориентировочное время чтения статьи по её длине; • оставшееся время до конца страницы. Подходит для любого сайта со статьями. Стили изолированы префиксом классов, настройка — через параметры JS и CSS-переменные. -------------------------------------------------------------------------------- 1. УСТАНОВКА НА САЙТ -------------------------------------------------------------------------------- Шаг 1. Скачайте файлы и разместите их на своём сайте: • https://embedlab.ru/scripts/ARPB/progress-bar.css • https://embedlab.ru/scripts/ARPB/progress-bar.js Шаг 2. Подключите в страницах со статьями стили и скрипт (в — CSS, перед — JS), указав путь к размещённым файлам: ... Шаг 3. После подключения скрипта добавьте инициализацию (перед ): Шаг 4. Сохраните страницу и откройте в браузере. Полоса и блок статистики появятся автоматически. Для демонстрации откройте файл demo.html в браузере. -------------------------------------------------------------------------------- 2. ПАРАМЕТРЫ НАСТРОЙКИ (JavaScript) -------------------------------------------------------------------------------- При вызове new ArticleReadProgressBar({ ... }) можно передать объект с ключами: contentSelector Селектор элемента с текстом статьи (например, ".post-content" или "#article"). Если не указан или элемент не найден — считается весь body. Пример: contentSelector: 'article .content' wordsPerMinute Среднее число слов, прочитываемых за минуту (для расчёта времени). По умолчанию: 200. showStats Показывать ли блок с процентом и временем. true | false. По умолчанию: true. showTimeRemaining Показывать ли «осталось до конца» (время). true | false. По умолчанию: true. showTotalTime Показывать ли общее время чтения. true | false. По умолчанию: true. showWordCount Показывать ли количество слов в статье. true | false. По умолчанию: false. showRemainingPercent Показывать ли «X% осталось» (сколько процентов страницы ещё не проскроллено). true | false. По умолчанию: false. minContentHeight Минимальная высота контента (px), при которой показывается время чтения. По умолчанию: 300. zIndex z-index контейнера прогресс-бара. По умолчанию: 2147483646. classPrefix Префикс классов (например, "arpb"). Меняйте только при конфликте с сайтом. По умолчанию: "arpb". position Позиция: "top" (сверху) или "bottom" (снизу). По умолчанию: "top". animate Плавная анимация полосы при скролле. true | false. По умолчанию: true. hideAtTop Скрывать ли панель, когда страница в самом верху. true | false. По умолчанию: false. hideAtTopThreshold Порог (0–1): при скролле ниже этой доли панель скрывается (если hideAtTop: true). 0 — скрывать только при scrollTop === 0. По умолчанию: 0. Пример вызова с настройками: new ArticleReadProgressBar({ contentSelector: '#main-article', wordsPerMinute: 220, showStats: true, showTotalTime: true, showTimeRemaining: true, showWordCount: true, position: 'top', animate: true, hideAtTop: true }); -------------------------------------------------------------------------------- 3. НАСТРОЙКА СТИЛЕЙ (CSS-переменные) -------------------------------------------------------------------------------- Переменные задаются для контейнера [data-arpb]. Их можно переопределить в своей таблице стилей после подключения progress-bar.css. Полоса прогресса: --arpb-bar-height высота полосы (например, 4px) --arpb-bar-bg фон трека (например, rgba(0,0,0,0.08)) --arpb-bar-fill цвет заполнения (например, #2563eb) --arpb-bar-radius скругление полосы (например, 0 или 4px) Блок статистики (процент, время): --arpb-stats-bg фон блока (например, rgba(15,23,42,0.92)) --arpb-stats-color цвет текста (например, #e2e8f0) --arpb-stats-font-size размер шрифта (например, 12px) --arpb-stats-padding внутренние отступы (например, 6px 12px) --arpb-stats-gap расстояние между элементами (например, 12px) --arpb-stats-border-radius скругление блока (например, 0 0 8px 8px) --arpb-stats-shadow тень (например, 0 4px 12px rgba(0,0,0,0.15)) --arpb-stats-font-family шрифт (например, "Segoe UI", sans-serif) Дополнительно: --arpb-remaining-color цвет текста «до конца» (например, #94a3b8) Пример переопределения (в своём CSS или в