Home / Scroll & Animation / Scroll progress
2.6 · Animation

Scroll progress
indicator.

A thin bar at the top of the page fills as you read. Calms long-form anxiety; signals "you're almost there."

What it is

A thin bar, usually at the very top of the page, that fills from left to right as the user reads down the page. When the user is at the top, the bar is empty. When they reach the bottom, the bar is full. It gives readers a sense of how far through the content they are, particularly useful on long blog posts and articles.

How it works

A fixed-position element sits at the top of the viewport (position:fixed; top:0; height:3-4px). Its width is calculated as a percentage: (scrollY / (document.body.scrollHeight - window.innerHeight)) * 100. A JavaScript scroll listener updates the width in real-time. Using CSS transform: scaleX() instead of changing width is smoother on most devices.

Live demo

Scroll inside the article. The gradient bar at the top fills from left to right.

Live · scroll inside
0%
Long read· 7 minMay 30, 2026

On the quiet art of building software no one notices.

When a tool does its job perfectly, it disappears. We've forgotten how to design for invisibility — and it's costing every product team more than they realize.

There is a particular kind of software that, when it works, you stop thinking about. The compass on your phone. The autosave in your editor. The spam filter you haven't checked in years. None of these have homepages with hero animations. None of them ask for testimonials. They just do the job, and the job is to be quiet.

The longer I work in this industry, the more I believe that the best work I have done has been the work nobody talks about — the friction I removed, the dialog I deleted, the modal that never had to ship. We celebrate the wrong things.

The cost of being noticed

Every time a piece of software interrupts a user, it pays a tax in trust. Some interruptions are necessary: confirmation before a destructive action, a critical error, a security warning. Most are not. The notifications we send to drive engagement, the modals we add to upsell, the badges we sprinkle on icons — these are all tiny withdrawals from an account that does not get refilled.

"The best interface is the one that never asks to be remembered."

The interesting thing is that this idea is older than software. The same instinct that makes a great butler invisible at a dinner party makes a great tool invisible during a workflow. The cleaner the friction, the harder the work behind it.

Designing for absence

How do you measure something a user did not notice? Not by impressions. Not by clicks. By time spent in the part of the product that matters — and the speed at which they return to it without being prompted. By retention curves that go flat for the right reasons, not the wrong ones.

This is harder to chart than a "new feature shipped" graph. But it is what differentiates products that last from products that win a season.

A quieter practice

Build the thing. Test the thing. Strip the thing. Test it again. Ship it without telling anyone. If they notice, you've already done too much. If they don't — but they keep coming back — you've done the work.

End of article. Did the progress bar reach 100%?

Copy this prompt

Prompt · 2.6 Scroll progress 
Add a reading progress bar to a blog post page. Create a fixed element: position:fixed, top:0, left:0, height:3px, width:100%, z-index:9999. Inside it, a div that starts at transform:scaleX(0) and transform-origin:left. On scroll event, calculate progress: scrolled / (totalHeight - viewportHeight). Update the inner div's scaleX to the progress value (0 to 1). Use a gradient fill from purple #667eea to pink #f64f59. Add a smooth transition of 0.1s on the scale for a slight lag that feels natural.

Example sites to study