Learn how to add a reading progress bar in Webflow for your blog posts with a JavaScript script.
In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to add a reading progress bar in Webflow for your blog posts.
Example
Scroll through the article to see the bar progress
How to Create a Reading Progress Bar in Webflow
5 min read
The reading progress bar is a visual indicator that shows the user how far they are in an article. It fills up as they scroll.
To implement it in Webflow, you need a fixed Div at the top of the page and a JavaScript script that listens for the scroll event to update its width as a percentage.
The math is simple: divide the current scroll position by the document's total scrollable height, then multiply by 100 to get a percentage.
This component is especially useful for long blog posts or documentation pages. It reduces bounce rate by giving readers a sense of how much time is left.
Pair it with an anchor system so users can jump straight to the sections they care about.
Drag to simulate scrolling
| CSS Property | Value | Description |
|---|
| position | fixed | Fixed at the top of the page |
| top | 0 | Stuck to the top edge |
| left | 0 | Starts on the left |
| height | 3px | Bar thickness |
| z-index | 9999 | Above everything else |
1. Add a Div element to your page
Create a Div on your page and give it the reading-progress class. Set it to: position Fixed, top 0, left 0, height 3px, width 0%, z-index 9999. Choose your accent color as the background.
2. Add this script in the <body>
const bar = document.querySelector('.reading-progress');
window.addEventListener('scroll', function {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = (scrollTop / docHeight) * 100;
bar.style.width = progress + '%';
});
3. Publish and test
The bar fills up gradually as you read. On a page with very little content, it will move fast: save this component for long articles.
good to know
To limit the progress bar to the article area only — not the whole page — replace document.documentElement.scrollHeight with the height of your article element: const article = document.querySelector('.article-content'); const docHeight = article.offsetHeight - window.innerHeight;
Conclusion
The reading progress bar boosts engagement on long-form content. Use cases:
- Long-form blog posts
- Documentation pages
- Step-by-step tutorials
