Полоса прогресса чтения

Полоса прогресса чтения: для чего нужен

Полоса прогресса чтения — это тонкая линия вверху, которая заполняется по мере чтения статьи и показывает, сколько осталось.

Выберите цвет или градиент, высоту и положение: вверху или внизу.

Как пользоваться

1. Выберите цвет, высоту и положение.
2. Прокрутите предпросмотр, чтобы увидеть работу.
3. Скопируйте код и вставьте на страницу статьи.

Когда использовать

• Блог и длинные статьи.
• Рецепты и обучающие материалы.
• Страницы документации.

Частые вопросы

Как это работает только на CSS?

С анимациями, привязанными к прокрутке (animation-timeline: scroll()), полоса растёт по мере прокрутки страницы без скриптов и без нагрузки на прокрутку. Chrome и Edge поддерживают это с версии 115, а Safari — с 26; в остальных код использует резервный JavaScript.

Где стоит использовать?

В длинных статьях, рецептах и руководствах, где знание того, сколько осталось, помогает дочитать. На коротких страницах полоса почти не двигается и ничего не добавляет.

Читает ли полосу программа чтения с экрана?

Нет: она декоративная и имеет aria-hidden, чтобы не озвучиваться при каждой прокрутке. У тех, кто пользуется программой чтения с экрана, уже есть другие способы узнать позицию в тексте.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты