WP Reading Progress

Description

The reading progress bar is a great user experience on longreads. Especially if it accurately depicts the reading progress in the article text, and nothing else. This is standard on single blog posts and enabled by default.

Customization:

  • location top of screen, bottom of screen or below a sticky menu

  • choose your color of the reading progress bar

  • have the bar start at 0% even when part of the article is visible

  • possibility to use the whole page, not only the article

  • select post types you wish the bar to appear, or even individual posts

  • activate reading progress for archive pages (I would leave that unchecked)

Behaviour:

  • The reading progress bar has smooth initializing since part of the text may already be visible, after that a lightweight update-function ensures quick response while scrolling

  • When the sticky menu disappears due to a media query (for instance), the progress bar automatically defaults to displaying at the top of the screen

  • Background is transparent white, only there for subtle contrast

  • If there is no single article identified (by class names or id) it uses the whole page to calculate progress

This is my 6th WordPress plugin but my first one freely available to everybody. I hope you enjoy using it as much as I enjoy building it!

Feel free to fork it on Github as well, if you want to play with the code

Regards,
Joeri (ruige hond)

Screenshots

  • Example of the reading progress bar on my photography blog
  • WP Reading Progress settings page
  • Activate the bar for an individual post (if the post type is not enabled)

Installation

  1. Install the plugin by clicking ‘Install now’ below, or the ‘Download’ button, and put the WP-reading-progress folder in your plugins folder

  2. By default it only works on single blog posts and uses an orange colour

  3. Go to settings->WP Reading Progress to customize it

Upon uninstall WP Reading Progress removes its own options and post_meta data (if any) leaving no traces.

Reviews

May 17, 2020
Out of all of the progress bar plugins I could find, this is one only one which fulfilled all of my needs and is super lightweight!! I messaged the developer with a couple of specific queries, and his response was faultless. He went out of his way to help! I am very grateful and can't recommend enough. Thanks again Jeori.
May 7, 2020
I tried several plugins for a read progress indicator. And out of all this is the best and the easiest. Setting up is pretty straightforward. Most importantly, the developer is super helpful and responsive unlike most of the free plugins out there. Totally recommended!
September 5, 2019
Works like a charm. Is lightweight, only 2,5Kb of JS added to the frontend.
June 15, 2019
I want to thank you for creating this plugin. I had seen so any plugins that offer this function; but, many of them are not kept updated to be both flexible and support higher versions of PHP. Thanks for creating this beautiful plugin
Read all 6 reviews

Contributors & Developers

“WP Reading Progress” is open source software. The following people have contributed to this plugin.

Contributors

“WP Reading Progress” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “WP Reading Progress” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.2.4: added regular post type to settings, added fallback find post by id when not found by class names, added option to display on specific posts only

1.2.3: fixed bug initializing window height to 0 on page load in some cases

1.2.2: increased compatibility with themes regarding looking for single article

1.2.1: added option to start bar at 0%, slightly optimized progress function

1.2.0: improved behaviour upon resize of the window

1.1.0: now identifies single post reading area for all post-types, fallback to body when not found in DOM

1.0.3: fixed translation, corrected license indication

1.0.2: translated to Dutch

1.0.1: minified javascript and css, fixed issue of bar sometimes momentarily disappearing on mobile device while scrolling

1.0.0: official release

0.0.4 ~ 0.0.6: fixed bugs in safari: progress bar would lag or not be visible on older iPads

0.0.3: improved initializing cross browser

0.0.2: smoother initializing, added customizing of location, color and post types / archive

0.0.1: reading progress bar works on single blog post, no customizing is possible