In this post, you'll discover and learn about some free and simple WordPress plugins you can use that will allow you to add a reading progress bar to your WordPress site or blog.
A critical component of modern web design is ensuring that you make a website as user-friendly as possible.
A while back, I experimented with a new feature on the Magnet4Blogging blog.
I added a reading progress bar above the site header. (November 2021 update: progress bar has since been removed).
This was quite a growing trend a while back, particularly with blogs.
Every now and then, I would come across a blog that provided some type of animated feature to give readers an indication of how far along they were when reading an article.
Personally, I think the idea of adding a non-obstructive interactive feature like this, particularly on your blog, is brilliant. These days, these indicators come in many shapes and forms and are not just constrained to a reading progress bar.
Of course, I also appreciate that it's not everyone's cup of tea. I've heard some folks argue that using any kind of reading progress indicator feature can be distractive for readers. I'd love to know what do you think?
Okay, so originally, I was going around searching for a tutorial on how to code this into my WordPress site. However, I've yet to find a solution that doesn't end up breaking my site.
So what's the next best solution?
Plugins!
I found quite a few of them but here's one that I'm using without any problems. The plugin I'm currently using is called 'Reading Position Indicator' by Marcin Pietrzak.
Okay, so let's go back to the first plugin I mentioned, here's how to install it and configure it on your WordPress blog.
Start by doing a quick search for the plugin 'Reading Position Indicator' via your plugins page in your WordPress dashboard, or just head over to this page to download it.
I always recommend installing any WordPress plugin directly from the repository or downloading it first then uploading it to your dashboard.
Or, if you prefer to use an FTP client, you can also do it that way if that what you're used to doing. Whichever method you prefer.
Once you have installed and activated the plugin, just head over to Appearance > Progress to change the visual and functional preferences to suit your website.
Here's what you can do with this plugin -
Check out the screen shot below.
Once you have everything in place, check to make sure it's looking and working great on your blog.
If for whatever reason, you don't like the plugin above, as I said, there are a few others you might also want to check out. Here are some more -
Reading Progress Bar - is a simple HTML and Javascript plugin that allows you to add a progress bar to the top, bottom, or in custom locations on your blog posts and pages.
Options include -
Worth The Read - is another lightweight, minimal-distractive reading progress bar that comes with a cool reading time commitment feature that you can control separately.
Like the other plugins mentioned above, you can change the color and placement of the progress bar on your posts or pages and have control over width, offset values, and transparency.
There you have it, three simple plugins and three simple solutions for adding a great user-friendly feature to your WordPress blog.
Leave me your comments below as always.
In the meantime, enjoy adding a reading progress bar to your blog.