Scroll-driven animations: прогресс-бар чтения статьи

animation-timeline: scroll().

Элемент `::progress` с `animation-timeline: scroll(root block)` и keyframes ширины показывает прогресс прокрутки longread — без слушателя scroll в JS.

При `prefers-reduced-motion: reduce` скройте полосу или заморозьте на 0%.

scroll-driven animations — MDN — Модуль анимаций от скролла.
Scroll-driven animations — web.dev — Туториал.

Производительность

Анимации на compositor-friendly свойствах (transform, opacity) дешевле, чем пересчёт width на каждый кадр на слабых устройствах.