Scroll Progress Bar

Use Scroll Progress Bar for reading depth; use Progress Bar for task completion.

Use

Helping users understand their position in long reading or guide pages.

Avoid

Avoid it when the page has several independent scroll areas or progress would be ambiguous.

Safer Alternative

Progress Bar

Risk Level

High attention

Timing

Progress should track scroll immediately; use only a tiny smoothing transition under 100ms.

Easing

Linear mapping from scroll position to width; avoid springy lag.

Risk

misleading progressaccessibility sensitive

Live Demo

What It Is

A thin bar that fills as the user scrolls through a page, showing current reading or completion depth.

Decision Guidance

Use Scroll Progress Bar for reading depth; use Progress Bar for task completion.

Best For

Helping users understand their position in long reading or guide pages.

Avoid When

Avoid it when the page has several independent scroll areas or progress would be ambiguous.

Timing

Progress should track scroll immediately; use only a tiny smoothing transition under 100ms.

Easing

Linear mapping from scroll position to width; avoid springy lag.

Risk Tags

misleading progressaccessibility sensitive

Alternatives

Progress Bar Sticky Heading Tracing Beam Scroll

✓When to Use

Long articles or documentation pages
Step-by-step guides where users need completion feedback
Single-page case studies or landing sections

✕When NOT to Use

Short pages where progress is obvious
Apps with many nested scroll containers
Dashboards where scrolling is not the primary task

Configuration Tips

01Bind progress to the main document scroll, not every small panel
02Keep the bar thin and fixed near the top of the viewport
03Do not use fake progress; compute it from scroll distance

You've Seen It In

MediumNotion DocsStripe Docs

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Add a thin fixed reading progress bar at the top of a documentation page that fills based on how far the user has scrolled.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

export function ScrollProgressBar({ progress }: { progress: number }) {
  return (
    <div className="fixed left-0 right-0 top-0 z-50 h-1 bg-stone-200">
      <div className="h-full origin-left bg-amber-400" style={{ transform: `scaleX(${progress})` }} />
    </div>
  );
}

Related Effects

Progress Bar

A horizontal bar that fills from left to right, showing the percentage of a task that's complete. Gives users a sense of how much longer they need to wait.

Sticky Heading

As the user scrolls down a list, the category header sticks to the top of the viewport until pushed out by the next category header.

Tracing Beam Scroll

A side navigation or progress bar where a glowing "beam" of light physically traces a curved SVG path downwards as the user scrolls, matching their vertical progression.