What a scroll progress bar divides by
A scroll progress indicator is the thin bar that shows how far through an article someone is. Everything hinges on the divisor: it has to be the distance that can actually be scrolled, not the full document height, or the bar never reaches 100 % at the bottom. Enter three values and you get the progress and the filled width, along with the error a wrong divisor introduces.
How it is calculated
Scrollable distance = scrollHeight - clientHeight, and progress = scrollTop divided by that distance, times 100, clamped between 0 and 100 %. Dividing by the document height instead tops out at (scrollHeight - clientHeight) / scrollHeight x 100, short by exactly the share the viewport occupies. Values are shown to one decimal and the notes are decided on the same rounded figure.
Limits and accessibility
As of October 2026 there is no official standard for the thickness, color or placement of a progress bar, so this tool proposes none. A changing browser chrome height, lazy-loaded images that alter the document height and scroll snapping are not modeled. If the bar animates, respect prefers-reduced-motion.
Frequently Asked Questions
Whatever fits in the viewport is already readable without scrolling. Dividing by the document height means the bar never reaches 100 % at the bottom; it stops at the ceiling shown in the result.
There is no official standard for either, so this tool proposes none. The bar is a graphical element, so give it enough contrast against its background to stay visible.
The formula is the same. Use scrollWidth, clientWidth and scrollLeft in place of the height values and you get horizontal progress the same way.