A thin progress bar fixed to the top of the page that fills up as a reader scrolls through a long article gives a clear visual sense of how much content remains, a common pattern on blogs and documentation sites.
Customize the bar color, scroll the demo box to preview the fill effect, then copy the complete HTML, CSS, and JavaScript needed to implement the same scroll progress indicator on your own long-form content pages.
The JavaScript calculates scroll percentage by comparing the current scroll position against the total scrollable height, updating the bar's width on every scroll event to keep it perfectly synced with actual reading progress.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
Frequently asked questions
Does this track scroll progress of the whole page, or just one element?
The generated code tracks the whole page's scroll by default; adapt the JavaScript to target a specific scrollable container's scroll event if you need progress for just one section instead.
Will this bar stay visible while scrolling, or disappear?
The bar uses fixed positioning so it stays visible at the top of the viewport throughout scrolling, continuously updating its fill width.