EspañolReading progress bar
Choose the color and height. In new browsers the bar moves with CSS alone, no JavaScript; in others, a small script does the same.
How to useHow much of the text has been read
Available in: 
Reading progress bar: what it is for
A reading progress bar is the thin line at the top that fills up as someone reads the article, showing how much is left.
The code uses CSS scroll-driven animations (animation-timeline: scroll()), which move the bar without JavaScript in browsers that support them, such as Chrome and Edge 115 or newer and Safari 26, plus a light requestAnimationFrame script as a fallback for the rest. Choose a color or a gradient, the height and whether it sits at the top or the bottom.
How to use
- Choose the color, height and position.
- Scroll the preview to see it working.
- Copy the code and paste it into the article page.
When to use it
- Blogs and long articles.
- Recipes and tutorials.
- Documentation pages.
Frequently asked questions
How does it work with CSS only?
With scroll-driven animations (animation-timeline: scroll()), the bar grows as the page scrolls, with no script and no scroll jank. Chrome and Edge support it since version 115 and Safari since 26; in the others, the code uses the fallback JavaScript.
Where is it worth using?
On long articles, recipes and guides, where knowing how much is left helps people keep reading. On short pages the bar barely moves and adds nothing.
Is the bar read by screen readers?
No: it is decorative and has aria-hidden, so it is not announced on every scroll. Screen reader users already have other ways to know their position in the text.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.