How to Create a Scroll Progress Bar in 7 Minutes

In this video, we use scroll-driven animations with animation-timeline: scroll() to connect page scroll to an animation, so the bar fills as you read.

You’ll learn:
- The minimal HTML structure (track + fill)
- The CSS animation (@keyframes) and how scroll becomes the timeline
- How to ship it as progressive enhancement with @supports (so unsupported browsers just see a normal bar)
- How to make it accessible

Code / demo:
- CodePen: https://codepen.io/theosoti/pen/ExqEyBO
- Article on the subject: https://theosoti.com/blog/scroll-driven-animation/

Browser support (78%): https://caniuse.com/wf-scroll-driven-animations

Видео How to Create a Scroll Progress Bar in 7 Minutes канала Theo Soti