How to Add a Reading Progress Bar in Webflow

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

Drag to simulate scrolling

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.

Conclusion

The reading progress bar boosts engagement on long-form content. Use cases:

• Long-form blog posts
• Documentation pages
• Step-by-step tutorials