Enhancing the user experience is crucial for every blog, and one simple yet effective way to do that is by adding a reading progress bar. This tiny visual indicator shows how much of the page a visitor has read, which can increase engagement and encourage users to finish reading your post.
If you’re a Blogger (Blogspot) user and want to implement a smooth, colorful reading progress bar on your site, you’re in the right place. In this guide, we’ll walk you through the process step-by-step. It’s simple, clean, and works on all modern browsers.
Why Add a Reading Progress Bar?
Before we jump into the how-to part, let’s understand why a reading progress bar is useful:
Improves UX – Visitors can visually track how far they’ve scrolled.
Reduces bounce rate – When users see they’re close to finishing, they’re more likely to stick around.
Professional look – It adds a modern and sleek appearance to your blog.
Step-by-Step: Add a Reading Progress Bar in Blogger
To make this work, you’ll need to insert CSS, HTML, and JavaScript in specific sections of your Blogger theme.
Step 1: Add CSS Code (Progress Bar Styling)
First, go to your Blogger Dashboard → Theme → Click on the down arrow next to “Customize” → Edit HTML.
Now find the </head> tag in your theme and paste the following code just above it:
<style>
/* Progress Bar Container */
.progress-container {
width: 100%;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
height: 5px;
background: transparent;
}
/* Rainbow Gradient Bar */
.progress-bar {
height: 100%;
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
transition: width 0.2s ease-out;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
/* Dark mode compatibility (optional) */
body.dark-mode .progress-bar,
html[data-theme="dark"] .progress-bar {
box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}
</style> Step 2: Add HTML Structure (Bar Container)
Now scroll down to find the <body> tag in your Blogger theme. Paste the following HTML (just below the) <body> tag:
<div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
</div> Step 3: Add JavaScript (Scroll Logic)
Finally, scroll to the bottom of your Blogger theme and locate the </body> tag. Paste the following JavaScript code (just above) that tag:
<script>
window.onscroll = function () {
myFunction();
};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script> You can customize the color by changing the gradient in the CSS.
Want a solid color? Replace the linear-gradient(...) with a single background-color.
Use it with long-form content like tutorials, reviews, or news articles for best results.
🎉 Final Output
Once you’ve added all three parts – CSS, HTML, and JavaScript – your blog will now have a beautiful rainbow progress bar that smoothly indicates how far a user has scrolled down the post. It stays fixed at the top of the screen and doesn’t interfere with other elements.
Conclusion
Adding a reading progress bar is one of those small enhancements that can make a big difference in how users interact with your content. It's quick to set up, easy to customize, and gives your Blogger site a polished, professional feel.
Give it a try on your blog and boost your visitors’ reading experience today!