How To Add A Reading Progress Bar To Your WordPress Blog

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).

Why add a reading progress bar to your blog?

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?

Adding a progress bar

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.

1. Installing Reading Position Indicator

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.

2. Configuring the plugin

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 -

• You can choose which pages to display the reading indicator, for instance, posts or pages, or both.
• You can choose where on the page you want the indicator to show up, top of the page or bottom.
• Change color style, solid, gradient, or indeterminate.
• Change the progress bar thickness.
• Change foreground color and opacity.
• Change secondary color and opacity.
• Change background color and opacity.
• Change progress bar radius.

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.

What other plugins are available for adding a reading progress bar?

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 -

• Progress bar’s height.
• Foreground color.
• Background color.
• Position (top, bottom, custom).
• Class/ID of HTML element to fix the bar (if custom position selected).
• Page templates.
• Post types (natives or custom).

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.

Over to you

1. Are you using any type of reading progress feature or reading time counter feature on your blog?
2. Do you think a feature like this is useful for users or not?

Leave me your comments below as always.

In the meantime, enjoy adding a reading progress bar to your blog.

Recommended tutorials

1. How To Install WordPress Locally On A Mac Computer
2. 50 Pro Blogging Tools [2020 Mega List]