Reading progress bar

A 3px bar pinned to the top of the window that fills as the visitor reads down a post. Self-contained: no jQuery, no library, no extra request, nothing added to your page weight.

It runs on single posts and pages only, so it never appears over your home page or an archive, where progress through the document means nothing to anyone.

What it does

• Prints a fixed bar across the top of the viewport with its own inline CSS and JavaScript
• Fills in proportion to how far down the document the visitor has scrolled
• Recalculates on resize, so it stays accurate when the layout reflows

Good to know

• The scroll and resize listeners are passive and throttled against the browser's own frame timing, so the bar costs one style update per frame at most rather than firing on every scroll event
• The bar is hidden from screen readers on purpose. It is decorative, and a percentage that changes on every scroll frame is noise rather than information.
• It ignores pointer events, so it can never intercept a click meant for your sticky header
• The colour and the height are plain CSS values at the top of the snippet, so matching your theme is a one-line edit