OneTaskBy Tim King · Updated
Reading Progress Bar Generator
CSS Scroll Indicator with JS Fallback
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Reading Progress Bar works
A reading progress bar is a thin strip along the top or bottom of the window that fills as the visitor scrolls down an article. Set its position, height and colours, scroll the preview to see it move, and copy the CSS and small JavaScript fallback for your site.
Long articles lose readers who cannot tell how much is left. A progress bar answers that at a glance without taking space from the content, which is why news sites and blogs use them on long reads.
How the reading progress bar works
The bar is one empty div fixed to the edge of the window. Its ::after pseudo-element holds the
fill and is scaled from 0 to 1 along the x axis with transform: scaleX(), which the browser can
animate without re-laying out the page. In Chrome, Edge and Safari 26 the CSS scroll-driven
animation animation-timeline: scroll(root) ties that scale straight to the page's scroll
position, so no script runs at all. Firefox does not ship scroll timelines yet, so a few lines of
JavaScript check CSS.supports and, only where needed, set a --progress custom property from
the scroll position.
Styling
Keep the bar between 3 and 6 pixels so it is visible without distracting. A gradient from your
brand colour to a lighter shade reads well on both light and dark headers. If your site has a
sticky header, put the bar at the bottom of the window or give it a top value equal to the header
height.
FAQ
Does the progress bar slow the page down?
No. The CSS version runs on the compositor with no JavaScript. The fallback uses a passive scroll listener and only changes one custom property, which only repaints the bar, so scrolling stays smooth even on slow phones.
Why does the bar reach the end before the article finishes?
It measures the whole page, including comments and the footer. To track only the article, use a view timeline on the article element, or in the script divide the scroll position by the article's height instead of the document's.
Is the progress bar accessible?
It is decorative, so it carries aria-hidden="true" and screen readers skip it. The page itself
already tells assistive technology where the reader is, and the bar never captures clicks because
it has pointer-events: none.
Can I put the bar inside a scrolling panel instead of the page?
Yes. Give the panel scroll-timeline: --panel block, use animation-timeline: --panel on the
bar, and change the bar from position: fixed to position: sticky or absolute inside the
panel. The preview on this page works that way.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Scroll Animation
Preview scroll reveal effects and copy the CSS or JS.
Progress Bar Generator
Generate a linear, striped, animated or circular CSS progress bar and copy the code.
Keyframe Animator
Build and preview a CSS @keyframes animation from three stops.
Drop Cap Generator
Style a magazine drop cap for the first letter and copy the CSS.
Gradient Maker
Linear, radial and conic CSS gradients with live preview.