Ещё недавно для прогресс-бара чтения на сайте приходилось подключать JavaScript: отслеживать событие scroll, вычислять процент прокрутки и менять ширину элемента. Теперь это можно сделать чисто на CSS, благодаря новой возможности — Scroll-driven animations.
Рассмотрим стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.reading-progress-bar { width: 0; height: 6px; background: blue; position: fixed; top: 0; left: 0; animation: fill-keyframes linear; animation-timeline: scroll(); } @keyframes fill-keyframes { to { width: 100%; } } |
Как это работает
animation-timeline: scroll();— указывает, что анимация будет синхронизирована с прокруткой страницы, а не с течением времени.@keyframes fill-keyframesописывает изменение свойства (здесь — ширины).- При скролле страницы полоса «наполняется» пропорционально тому, сколько контента пользователь пролистал.
То есть ширина элемента теперь зависит не от секунд, а от положения скролла.
Поддержка браузеров
Понятно, что фича новая, и потому возникает вопрос, а кто из браузеров это поддерживает?
На данный момент фича поддерживается в Chrome 115+, Edge 115+ и частично в Safari Technology Preview. Firefox пока находится на этапе внедрения.
Для продакшн-решений имеет смысл предусмотреть fallback (например, оставить JS-реализацию для неподдерживаемых браузеров).
Где можно использовать
- Прогресс-бар чтения статьи.
- Анимированное появление блоков при скролле (без
IntersectionObserver). - Креативные эффекты: фоны, изображения или градиенты, которые меняются при прокрутке.
