Reading progress bar. Sticky-header safe.
This is a digital download. No physical item will be shipped.
By purchasing you agree to our Terms of Service. A 30-day refund is available — see our Refund Policy.
ReadingBar adds a thin scroll-progress indicator to the top of your page that fills as the user reads down. It's a small detail, but it measurably increases time on page for long-form content by giving readers a sense of progress and a reason to keep going.
Most reading bar implementations break when you have a sticky header — the bar overlaps the nav or sits behind it. ReadingBar detects your header's height automatically using ResizeObserver and positions itself correctly regardless of header size or whether the header changes height on scroll.
Colour, height, position (top or bottom of viewport), border-radius, and z-index are all controlled via CSS custom properties. The optional reading time badge reads the content length and displays an estimated reading time next to the bar — configurable words-per-minute, with an option to show it only on articles above a minimum word count.
Under 600 bytes minified. No dependencies. Works with any layout.
