Scroll progress bar
Also called reading progress bar or reading indicator
A thin bar at the top of a page that fills from left to right as the reader scrolls, showing how much of the article is left.
import { useRef, type ReactNode } from 'react';
import { motion, useScroll, useSpring } from 'motion/react';
export function ArticleWithProgress({ children }: { children: ReactNode }) {
const ref = useRef<HTMLElement>(null);
// 0 at the top of the article, 1 when its end reaches the bottom of the viewport.
const { scrollYProgress } = useScroll({
target: ref,
offset: ['start start', 'end end']
});
// A light spring smooths out jumpy mouse wheels.
const scaleX = useSpring(scrollYProgress, {
stiffness: 200,
damping: 40,
restDelta: 0.001
});
return (
<>
{/* scaleX with origin-left fills the bar without triggering layout. */}
<motion.div
aria-hidden='true'
style={{ scaleX }}
className='fixed inset-x-0 top-0 z-50 h-[3px] origin-left bg-blue-600'
/>
<article ref={ref} className='mx-auto max-w-prose px-6 py-16'>
{children}
</article>
</>
);
}Add a reading progress bar to blog posts: a 3px bar fixed to the top of the viewport, in the brand color, that grows from 0 to full width as the reader scrolls from the top of the article to its end. Animate transform: scaleX with transform-origin: left, smooth it with a light spring, hide it on posts shorter than two screens, and mark it aria-hidden.
Paste into Layerwise or any AI coding tool.
What is Scroll progress bar?
A scroll progress bar turns how far you have scrolled into the width of a bar, usually 3 to 4px tall and pinned to the top of the screen. It answers a quiet question during long reads: how much is left?
Use it on long articles, docs, and guides; on short pages it fills almost instantly and adds nothing. Animate it with transform: scaleX() and transform-origin: left, which the browser can update without recalculating layout, so it stays smooth on long pages.
CSS alone can drive it with animation-timeline: scroll() in browsers that support it, and Motion’s useScroll works everywhere. The bar is decorative, so mark it aria-hidden.
Often confused with
- Progress bar
- A progress bar shows how far along a task is, like an upload. A scroll progress bar shows how far down the page you have read.
Related terms
All termsScroll-driven animation
An animation whose progress is tied directly to the scroll position, so it moves forward as you scroll down and rewinds as you scroll up.
Sticky header
A top bar that stays pinned to the top of the screen while the page scrolls underneath it, so navigation is always one click away.
Scale
A CSS transform that draws an element larger or smaller around its transform origin, without pushing neighboring elements.
Spring animation
An animation driven by simulated spring physics in place of a fixed duration and curve, so motion can overshoot, settle, and react naturally.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.