Have you ever had a chance to see an article that has a reading progress bar indicator at the top of the page? This progress bar helps to track how far you have gone through the article and how much is left.
Table of Contents
Significance of reading progress bar indicator
The progress bar encourages users to continue reading the article and keeps the user engaged. In this article, we will see how to add a Reading Progress Bar Indicator in WordPress Posts.
The progress bar is usually placed on the top of the page and navigates from one end of the page to the other like a floating indicator. This progress bar is bi-directional and its flow depends on how you scroll the article.
Solution: The 4 WordPress plugins
In WordPress, we can easily create a reading progress bar indicator using the plugins.
In this article, we will see the following 4 plugins that help to create the progress bar:
Read Meter – Reading Time & Progress Bar
The Read Meter plugin displays the estimated reading time for blog posts with a reading progress bar indicator. It works great to give visitors a quick idea about the time needed to read a post and encourages them to go on till the end.
After installing the plugin, navigate to the admin panel > settings > Read Meter.
In the General Settings, you can select whether to display the progress bar in posts or pages or both. You can also select the approximate number of words per minute to show the “minutes read” in your article.
You can configure the “read time” from the following:
To select the position of the progress bar navigate to the “Progress Bar” section. Select “none”, if you do not want to display the reading progress bar indicator.
Worth The Read
The Worth The Read is a very unobtrusive and lightweight reading progress bar indicator showing the user how far scrolling through the current post or page they are. You can control the placement and color of the progress bar, and you can choose whether it includes just the main content or also the comments.
After installing the plugin, navigate to the admin panel > Worth the read.
Under the reading progress > functionality, you can control where to display the progress bar.
In the reading progress > style, you can control the stylings of the reading progress bar indicator.
Under the Time Commitment > functionality, you can control the minutes read of an article.
In the Time Commitment > style, you can control the style of minutes read of an article.
Reading Progress Bar
Get a reading position indicator as a Reading Progress bar and show it where you want: top, bottom, or custom position in different templates or post types. It is very lightweight, and it uses <progress> HTML5 element and a few lines of javascript.
Once the plugin is installed, navigate to the admin panel > settings > Reading progressbar.
You can customize the plugin using the following options:
WP Reading Progress
The WP Reading Progress bar is a great user experience on long-reads. 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.
When the installation is completed, navigate to the admin panel > settings > WP Reading Progress.
You can customize the plugin using the following options:
In the next article, we will see how to create a progress timer bar using Bootstrap and jQuery.
