Have you ever seen reading progress bar on any website you visited?
I did, one day I was reading a blog post on a blog. I saw that a bar on the top of my screen is moving forward as I scroll down the page.
It filled entirely when I finished reading the post.
It was showing me how much I read and how much I need to read more. It encouraged me to read the entire post.
It was reading progress bar… Don’t know you what is that?
Table of Contents
What Is Reading Progress Bar?
Reading progress bar is like a loading bar that shows on the top of the screen that moves ahead as you scroll down to read the post. And when you scroll up it moves back.
It shows you how much you have read and how much remaining to read…
Reading progress bar is good for user experience… as it shows the time to read a complete blog post and encourage readers to read the entire post.
Why Should You Add Reading Progress Bar?
It is good for blogs that publish long-form articles. Usually, readers skip reading long articles because of time.
But if you are using a progress bar on your blog then it will encourage readers to read your blog post.
Having a bar which shows estimates the gauge you need to read more. It shows that you value your readers’ time.
Adding a reading progress bar is very easy to add in the WordPress blog and you can add it for FREE.
There are many reading progress bar WordPress plugins which you can use.
How To Add Progress Reading Bar In WordPress?
There are many useful reading progress bar WordPress plugins available but I am using the Worth The Read for this tutorial.
For adding the reading progress bar using Worth The Read plugin. First, you need to download and install Worth The Read by going to Plugins>Add New.
Once it Installed, activate to make it LIVE on your WordPress site.
Now find the Worth The Read section in the Dashboard, You can find it after the settings tab on left-side menus.
Go to Worth The Read>Reading Progress. You will see two tabs functionality and style.
Choose Display On: Choose where you want to show your Reading Progress bar, you have three options Posts, Pages and Homepage.
Custom Post Type: If you have added any Custom Post type on your WordPress website, you can select that from here if you want to show the progress bar on custom post type.
Include Comments: The reading progress bar is for the length of the entire post if you want to include the comments in its length then On it. I recommend you to make it OFF.
Placement: Choose where you want to show the bar, you can select from the top, bottom, left and right. Mostly bloggers place it on the TOP.
Offset: If you don’t want to cover up the menus and header then select it according to your choice. I recommend keeping it Zero.
RTL(Right to Left): Progress bar usually moves from left to right. but if you want it to move vice-versa then make it On.
Fixed Opacity: On this option, the opacity will not change when readers will scroll the page, it will be fixed.
Non-Touch Devices: Your sites also visited by users who uses non-touch devices. Turn this option On if you want to show a reading progress bar on non-touch devices like desktop and computers.
Touch Devices: A site mostly visited by the Android phone. Choose this option to show your progress bar for touch devices like tablet and Android phones.
Touch Offset: You can set different Offset for touch devices.
Content Offset: You can offset where the progress bar thinks the content begins. This is handy if you have a large image at the beginning of your content that you want the progress bar to ignore, for instance.
Thickness: You can set the Thickness of your reading progress bar from this option.
Foreground: Select the colour of the part which moves.
Foreground Opacity: Select the opacity of the foreground colour using this option.
Background: Choose the background colour of your reading progress bar.
Comments Background: This is only for if you include comments in your bar, you can select a different colour than background for comments part which will move.
Transparent Background: If you want to make your background transparent then On this option.
Once you set all the options according to your needs and to match your theme style. Click on the Save Settings and visit your live website to check.
You can watch this video also to enable reading progress bar in WordPress…
I hope now you got how you can add a reading progress bar on your WordPress website. Worth The Read is a simple plugin for this task.
But there are many other plugins also for the same task, here are some of them.
Other Reading Progress Bar WordPress Plugins
As WordPress has tons of plugins in the WordPress plugin directory where you can find plugins of every task you do in WordPress.
Reading Progress Bar
Another simple plugin for adding a progress bar, this will help you to add a progress bar for your readers to let them know how far along they read and how much remaining.
Options of Reading Progresbar:
- Progress bar’s height
- Foreground colour
- 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)
Reading Progress Indicator
Reading Progress Indicator is a popular plugin with 5 start rating and 1000+ active installs.
It helps in creating a vertical reading progress bar on your blog that will inform your readers about their reading position.
WP Reading Progress
WP Reading Progress helps you in adding reading progress bar that helps your readers in knowing how much more they need to read the post.
It is great for blogs that have a long post, it encourages readers to read the entire blog post.
Read Meter – Reading Time & Progress Bar
The read meter will display an estimate reading time along with an attracting progress bar that will encourage your readers to read the entire blog post.
Readers usually skip the post because they found it very long to read but if you are using Read Meter plugin then it will show them the estimated time and a progress bar that will encourage them to read.
Try It Yourself
Reading Progress bar will help you to encourage your readers to read the entire blog post. It displays the gauge and the estimated reading time to your readers.
Now you know how to add reading progress bar and the plugins you can use to add one for your blog.
I hope you liked this post and if you did then must share it with others.