MotionMotionScrollProgressuseScroll
Scroll Progress Indicator
A progress bar that fills as you scroll down the page using Motion scroll animations. Great for reading progress on articles.
Preview
Scroll down to see the progress bar fill up. This uses Motion's useScroll and useSpring hooks.
Section 1
Section 2
Section 3
Section 4
Section 5
Section 6
You made it!
Code
import { motion, useScroll, useSpring } from 'motion/react'
export function ScrollProgress() {
const { scrollYProgress } = useScroll()
const scaleX = useSpring(scrollYProgress, {
stiffness: 100,
damping: 30,
restDelta: 0.001,
})
return (
<motion.div
className="fixed top-0 left-0 right-0 h-1 bg-olive-950 origin-left"
style={{ scaleX }}
/>
)
}Want to see more?
Browse the full collection of animation snippets and find your next inspiration.