How To Add A Reading Progress Bar To Your WordPress Blog

Last Updated on April 2, 2018 by Fabrizio Van Marciano

In this post you'll discover and learn about some free simple WordPress plugins you can use that will allow you to add a reading progress bar to your WordPress site or blog.

One of my obsessions as a web designer is ensuring that I do everything that I can to make a site as user-friendly as possible.

I recently added a new feature to the Magnet4Blogging blog, which I'm sure some of you will have noticed.

What's this new feature?

Well, I've added a (hopefully, nonobstructive) reading progress bar above the site header.

Progress Bar 2
  • Save

Why add a reading progress bar to your blog?

You may have noticed the trend some websites are following, in particular, blogs.

Many blog owners are providing some type of animated indicator feature to give their readers an indication of how far along they have read a blog post or page article.

Personally, I think the idea of adding a non-obstructive interactive feature like this, particularly on your blog, is brilliant. And, especially if you value your readers time.

I've heard some folks argue that using any kind of reading progress indicator feature can be distractive for blog readers. What do you think?

Adding a progress bar

OK, so originally I was searching for a tutorial on how to actually hard code this into my WordPress site or theme, however, I've yet to find a solution that doesn't actually end up breaking my site.

So, in the meantime, I found a couple of really nifty little plugins that can do the job quite well.

One of these plugins and the one I'm currently using is called 'Reading Position Indicator' by Marcin Pietrzak,.

If you've been looking for a really simple way to add a reading progress bar to your WordPress blog yourself, then I recommend you check this plugin out.

Here's how to install it and configure it on your WordPress blog.

Installing Reading Position Indicator

OK, so just do 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. Which ever method you prefer.

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.

Progress Bar 1
  • Save

Once you have everything in place, check to make sure it's looking and working great on your blog.

Other plugins available for adding a reading progress bar.

If for what ever reason you don't like the plugin above, you might also want to check out these other great plugins.

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, as well as have control over width, offset values, and transparency.

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

  • Save

Join Over  19,700+ Readers

Get fresh content from Magnet4Blogging delivered straight to your inbox, spam free! Or follow us on social media.

2 comments on “How To Add A Reading Progress Bar To Your WordPress Blog”

  1. Hello Fabrizio,

    This feature looks really cool 🙂

    I am looking forward into it. Its is always good to add up some extra catchy things to our web site. These do help in leaving an inspiration behind our readers.

    I was not using this reading progress bar, but I surely think that I am going to get one for my web sites.

    Thanks for the share.


    1. Hi Shantanu,

      I love the reading progress bar because it's so simple. This particular plugin is so lightweight and easy to install. It's also a great feature to readers wanting to know how far along they are when reading a post.

      Have a great rest of the week mate.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Share via
Copy link