01 / Give the reader a landmark
A progress line works best as a secondary cue on a long article. It does not replace a useful title, section headings or a table of contents. A visitor should be able to find a particular answer without reading everything that comes before it.
This example measures the entire document. It is deliberately different from article-only progress: the header, controls and footer are included. At the top the value is zero; at the bottom it reaches one hundred percent.
02 / Keep scrolling native
Use your wheel, trackpad, keyboard or touch screen. The example listens for scrolling but never cancels it. Page Down, Space and arrow keys keep their normal browser behaviour.
The indicator uses a transform on a fixed element. Changing its scale does not push the text around. There is no animated width on the article and no smoothing that leaves the bar chasing your actual position.
03 / Let the page change
Real documents change after the first render: fonts finish loading, images occupy their intended space and readers expand details. The fallback measures the scroll range again when the document body is resized.
Try adding another section using the control above, then scroll back to the end. Progress should be calculated against the longer document. An image should still reserve its width and height; a progress indicator cannot repair layout shift elsewhere on the page.
04 / Make the quiet version good
Motion is optional. This page remains a normal readable article if JavaScript fails. The decorative bar is hidden when the device requests reduced motion, and its changing value is not announced to a screen reader on every scroll event.
“Check my progress” provides a text value when requested. That is useful feedback without a constantly talking live region. Use this last section to check that the bar reaches the end with the footer included.