Looking for a tutorial on how to add reading progress bar WordPress website? You got the right blog. In this blog, we will discuss how to add a progress bar for free to a WordPress site. We also added how to add a reading progress bar WordPress website without a plugin. Moreover, we have added multiple alternative progress bar plugins.
But what is a progress bar, and why is it important?
Imagine a situation where a user is reading a long blog and they are almost end of the reading. But there’s no clue that the blog is coming to an end soon. So the users left just before the CTA came. You bring a user, s/he is reading, moves to almost the end, but they leave. Sad! Right? A progress bar can save you from this condition.
A reading progress bar is a visual indicator, often a thin line at the top of the page, that fills up as a visitor scrolls down your blog post. It shows them exactly how much of the article they have read. A reading progress bar, also known as a scroll progress bar.
It’s important because it improves the reader’s experience. It gives them a sense of accomplishment. It also shows how much content is left, which encourages them to finish the article. This keeps visitors on your blog longer and makes your content feel more engaging and less intimidating.
You can install Minifly, go to the website section, toggle on the progress bar and save changes. This way, you can enable a progress bar in your WordPress website. In the following section, we will add more details step by step to get the same output.
How to Add Reading Progress Bar WordPress Website 2025
Adding up scroll progress bar to your WordPress site is a 2-step process right now. Install the Minifly Plugin and Toggle on the options.
#Step-1: Install and activate the Minifly WordPress plugin. This is similar to any other plugin installation. Log in to your WordPress admin panel, then go to the plugins. Then add new plugins and search for Minifly. Install and activate the plugin.
Minifly free version is available in the WordPress directory. In case you need a manual installation, download the file from the WordPress directory link.
During the installation, there will be a considerable notice. You can accept or skip it. No worry! And we collect non-sensitive data through Freemius to improve our services. And if you skip, you will get the same services, no problem.
After the activation, you will drive to the Minifly page. Under the “Website”, you can see the Minifly Add site-wide progress bar. Toggle on and click on the Save Changes. Magic done! Your WordPress reading progress bar option is done in the front end.
Once you save, every user can see the WordPress progress bar on the site. In case you want to switch off the WordPress progress bar, no worries. From the same settings, you can just toggle off. Do you need to change the color and height of the scroll progress bar WordPress site? That leads us to work with Minifly Pro.
How to Customize Reading Progress Bar with Minifly Pro
You can unlock the WordPress progress bar customization with Minifly Pro. One upgrade will bring dozens of advanced options too.
Make sure you have activated the Minifly Pro license key to see this pop-up. In this pop-up, you can add a progress bar, WordPress background color and height. Adjust the color with your brand and click on the Save. The color changes will be applied in back to the back-to-top WordPress button.
We are also working on more customization, like changing the style, making it a left-side button, and so on.
Our technical documents are completed here. However, we will not bind you to our plugin only. Here are a few more ways you can implement the same features in your site.
How to Add a Reading Progress Bar without a Plugin
You can also add a reading progress bar without any plugin. You can do it with just a bit of HTML + CSS + JavaScript. But this is a technical approach and try this only if you know how to code. You also need to have control panel access to implement this on the site. You can also use the code snippet plugin to implement this.
1. Add the Progress Bar HTML
Go to the theme file. You can access it via FTP or from the theme editor file. Copy and add the following code right before the closing </body> tag in your theme’s footer.php.
<div id="reading-progress"></div>
2. Style the Progress Bar with CSS
Similar to the spet-1, add the following CSS to your style.css. You can find it in style.css or inside the asset file. If you access the file from the admin panel, then check the asset file. It’s also possible to add via Customizer → Additional CSS.
#reading-progress {
position: fixed;
top: 0;
left: 0;
height: 5px;
background: #3498db;
width: 0%;
z-index: 9999;
transition: width 0.25s ease;
}You can set the progress bar color and height as you need based on the site design.
3. Add JavaScript for Scroll Tracking
This is the last thing to do. Put this inside your theme footer.php just before the </body>, or enqueue it properly in a custom JS file.
<script>
document.addEventListener("scroll", function () {
let scrollTop = window.scrollY;
let docHeight = document.body.scrollHeight - window.innerHeight;
let scrollPercent = (scrollTop / docHeight) * 100;
document.getElementById("reading-progress").style.width = scrollPercent + "%";
});
</script>
Once you complete all 3 steps, you can see a smooth progress bar on the site. You can just remove the code to hide the features from the website.
Alternative Reading Progress Bar WordPress Plugins 2025
If you need progress bar features in the WordPress site, you can find them in many plugins. Specifically, the page builder type plugin has the features in most cases. A few shows dedicated progress bar and a few others have a progress bar-related block. But in this section, we will explore only the dedicated progress bar plugin.
(01) Read Meter
The Read Meter plugin displays the estimated reading time for blog posts along with a WordPress progress bar. The plugin has 10,000+ active users with 16+ five-star ratings. This would be one of the best Minifly alternatives to the reading progress bar WordPress plugin. But the Read Meter plugin will enable a single feature only, whereas Minifly comes with a long list of features.
(02) Reading progressbar
You can add a reading position indicator as a WordPress progress bar and show it where you want with the Reading Progressbar plugin. This plugin has 7,000+ active users with 17+ perfect five-star ratings. The features and ratings show the capability of the plugin.
(03) Worth The Read
This is another very unobtrusive and lightweight reading progress bar WordPress plugin. You can control the placement and color of the WordPress progress bar. You can choose whether it includes just the main content or also the comments. This is our last alternative progress bar WordPress plugin that has 4,000+ active users.
The above alternative WordPress progress bar plugin may seem nice to try. But please keep in mind that all the given plugin enables only a single progress bar feature. But the Minifly comes with a box of features that’s essential for any website.
Final Words and Recommendation
Minifly is our recommended plugin, of course. This is the simplest one to enable a progress bar. Just a single click, we explained it already. The plugin also brings a lot of essential features. As we are the authors of this plugin, we are also providing support for any issues it brings to the site.
That’s all for the scroll progress bar. We hope you will enable the scroll progress bar with a single toggle click. You can also adjust the progress bar style with Minifly Pro. If you enjoy this blog, please share it with your social media friends. This motivates us to publish more blogs.
We also invite you to check Minifly documentation, tutorial on how to add back to top button, eLearning topics and much more. Are you also facing any issues? Feel free to contact us today. We are striving to develop solutions that surpass those of any other plugin. And your participation is highly appreciated. Cheers
