Элемент ::progress с animation-timeline: scroll(root block) и keyframes ширины показывает прогресс прокрутки longread — без слушателя scroll в JS.
При prefers-reduced-motion: reduce скройте полосу или заморозьте на 0%.
- [scroll-driven animations — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations) — Модуль анимаций от скролла.
- [Scroll-driven animations — web.dev](https://web.dev/articles/scroll-driven-animations) — Туториал.
---
## Производительность
Анимации на compositor-friendly свойствах (transform, opacity) дешевле, чем пересчёт width на каждый кадр на слабых устройствах.