Back to Motion Prompt examples
Landing page & web effects · #07
Scroll progress bar
A bar at the top shows how far you have read. As the article is read a bit at a time, the line along the top grows from the left and reaches the far end at the bottom of the page.
Scroll effectsprogress-barreading-progressscroll-progressindicatorscroll-drivenarticle
Full motion specification
How the movement works
Use it on long articles to show how much is left to read.
- 01The article scrolls 0→430 px in four 110 px steps, each moving for 0.45 s then pausing 0.4 s (cubic ease-in-out).
- 02It returns 430→0 at 3.75–4.55 s.
- 03A 6 px bar along the top of the viewport: light grey track, orange fill.
- 04Fill width = 511 px × scroll / 430, the scroll fraction itself (the same as CSS animation-timeline: scroll()).
Prompt
Add a scroll progress bar at the top of the article page, 4 px thick, in the brand orange.