Need to add a studying progress bar to WordPress?
A studying progress bar is an effective way to enhance your website’s consumer expertise by giving readers a visible indicator of their progress by way of a submit.
If you wish to add one to your website, there are a ton of nice free or inexpensive plugins that assist you add a progress bar and match its design to the remainder of your website.
On this submit, we’ve collected 8 of the highest choices, 6 of that are fully free.
Under, we’ll share particulars for every plugin, together with a fast introduction to how progress bars work and why they are often helpful to your website.
What Is a Studying Progress Bar?
A studying progress bar does just about precisely what the identify says – it lets your website’s guests see how far they’ve progressed by way of the content material of your submit.
Sometimes, you’ll stick a horizontal bar to the highest or backside of the web page. As customers scroll by way of the submit, the bar will “refill” to point how shut they’re to the top of the content material.
Some plugins additionally provide the choice to create a vertical progress bar on the left or proper of the content material. In these circumstances, it appears virtually like a scroll bar. Nonetheless, the important thing distinction is that the progress bar might be primarily based on the size of the particular content material, whereas the browser scroll bar is predicated on the total size of the web page.
Listed below are two actual examples of the standard approach that websites use studying progress bars…
HubSpot provides an orange progress bar that seems instantly beneath its sticky header:
Thrive Themes has a inexperienced studying progress bar that additionally seems beneath the sticky header:
Nonetheless, you may experiment with completely different progress bar placements relying in your website.
Why Add a Studying Progress Bar to WordPress?
At a excessive degree, a studying progress bar is a approach to enhance the usability and consumer expertise in your website, which might have extra direct results on vital metrics equivalent to time on web page and bounce price.
First, let’s speak about consumer expertise usually.
Most individuals wish to know what they’re moving into earlier than investing the time to have interaction together with your submit. Is it a 5-minute article they will learn in between duties or is it a prolonged 20-minute article that can require some critical focus?
A progress bar provides readers a good suggestion of what to anticipate out of your submit as they begin studying. To assist with this, some websites additionally add an estimated studying time along with the progress bar, which a number of of the plugins beneath assist.
As soon as your guests begin studying, the progress bar may also encourage them to complete the submit. For instance, if a reader sees that they’ve already made it by way of 80% of the content material, they’ll be inspired to complete the final 20% as a result of they’ve already made it by way of a lot of the submit.
These enhancements in consumer expertise can have constructive results on two key metrics:
- Dwell time – by encouraging readers to complete a submit as soon as they’ve began studying, you may improve the time that they spend on the web page.
- Bounce price – by growing the time that guests spend in your web page, you’ll improve the possibility {that a} customer will proceed to have interaction together with your website (possibly by studying one other submit), which might assist scale back your bounce price.
When you mix progress bars with different consumer experience-boosting techniques equivalent to high quality navigation construction and good use of pagination, you may create a very nice, participating expertise for guests.
8 Greatest Studying Progress Bar WordPress Plugins
Now, let’s get into the 8 finest progress bar WordPress plugins that can assist you add a studying progress bar to your website.
Whereas you’ll find generic progress bar plugins that allow you to create a customized progress bar for something, this submit is particularly centered on plugins that add studying progress indicators primarily based on the size of a web page’s content material.
When it comes to pricing, 6 of those plugins are fully free, whereas the two remaining plugins are inexpensive and add some additional flexibility that you simply gained’t discover in a lot of the free choices.
Better of all, all of those plugins ought to work with just about any WordPress theme.
Learn Meter
Learn Meter is a studying progress bar plugin from Brainstorm Drive, the identical workforce behind the favored Astra WordPress theme (which made our checklist of the quickest WordPress themes).
The plugin allows you to routinely add a studying progress bar that sticks to the very prime or backside of the web page. You even have the choice to show the submit’s estimated studying time together with the progress bar.
Right here’s all the pieces that you simply’ll get with Learn Meter:
- Prime or backside placement – show the progress bar on the prime or backside of a consumer’s display screen.
- Submit sort focusing on – you may decide to solely add the studying progress for sure submit varieties (together with customized submit varieties). For instance, you could possibly show it on weblog posts however not on pages.
- Learn time – routinely add the estimated learn time to numerous components of the submit (e.g. beneath the title) or manually place it utilizing a shortcode.
- Customizable colours – you may customise the colours and magnificence of each factor to make it match your website.
Worth: Learn Meter is 100% free.
Studying progressbar
Together with Learn Meter, Studying progressbar is one other some of the standard progress bar plugins at WordPress.org. In contrast to Learn Meter, nevertheless, this plugin doesn’t offer you an choice so as to add the estimated studying time – it’s solely for the progress bar.
Nonetheless, it does offer you some additional focusing on flexibility that Learn Meter doesn’t provide. For instance, you may goal your progress bar to particular templates along with post-type focusing on.
Right here’s all the pieces that you simply’ll get with Studying progressbar:
- Versatile positioning – you may routinely stick your progress bar to the highest or backside of the web page. Or, there’s additionally a customized positioning choice that permits you to stick it to any CSS factor. For instance, if you will have a sticky header, you could possibly stick it beneath your header navigation menu as a substitute of all the way in which on the prime of the web page (just like the HubSpot instance above).
- Customizable design – change the peak and colours of your progress bar to match your website.
- Focusing on choices – you may solely show your progress bar on sure templates and/or submit varieties.
Worth: Studying progressbar is 100% free.
Definitely worth the Learn
Definitely worth the Learn is without doubt one of the most customizable progress bar WordPress plugins, which makes it a fantastic choice in case you discover the earlier plugins too limiting.
It contains some distinctive placement and focusing on choices that the majority different plugins don’t provide, together with another distinctive touches. It additionally provides you the choice so as to add an estimated studying time if most well-liked.
Right here’s all the pieces that you simply’ll get with Definitely worth the Learn:
- Horizontal or vertical positioning choices – embody a horizontal progress bar on the prime or backside of the display screen OR a vertical progress bar on the left or proper of the display screen. The vertical choice is exclusive as most different plugins don’t assist it.
- Submit sort focusing on – solely embody your studying progress bar on sure submit varieties.
- System focusing on – you will have the choice to show off the progress bar for cellular units and tablets (or desktops).
- Remark progress – you will have the choice to incorporate feedback within the studying progress, which may be good when you have lively feedback sections with helpful info.
- RTL assist – it’s one of many few plugins that permits you to change to RTL, which may be nice for websites in RTL languages.
- Fashion choices – customise the colours, thickness, opacity, and so forth. When you’ve enabled the feedback, you may even use a separate shade to point when the remark part begins on the progress bar.
- Estimated studying time – in case you allow studying time, you may customise its performance and place it routinely or manually utilizing a shortcode.
Worth: Definitely worth the Learn is 100% free.
Catch Scroll Progress Bar
Catch Scroll Progress Bar is one other light-weight choice for including a primary progress bar to your website.
It retains issues fairly easy, with simply the minimal choices that you should place and magnificence your progress bar.
Right here’s all the pieces that you simply’ll get with Catch Scroll Progress Bar:
- Prime or backside place – stick your progress bar to the highest or backside of the web page.
- Submit sort focusing on – solely add your progress bar to sure submit varieties.
- Template focusing on – inside these submit varieties, solely show it on sure templates. For instance, you could possibly add it to single posts however not the archive web page.
- Shade and magnificence choices – customise the colours, opacity, and peak of your progress bar.
Worth: Catch Scroll Progress Bar is 100% free.
WP Studying Progress
WP Studying Progress is one other free progress bar WordPress plugin that’s out there at WordPress.org.
Just like the earlier plugin, it solely provides you the minimal settings wanted to customise your studying progress bar. However for most individuals, that’s all you want, which makes it one other stable choice.
Right here’s all the pieces that you simply’ll get with WP Studying Progress:
- Versatile positioning – routinely stick the bar to the highest or backside of the web page. Or, you may manually stick it to any CSS selector.
- Submit sort focusing on – solely embody a progress bar on sure submit varieties. There’s additionally an choice to allow/disable on archive pages.
- Fashion customization – you may customise the colour and thickness of the progress bar. Nonetheless, you solely get to decide on a single shade and there are not any choices for opacity.
Worth: WP Studying Progress is 100% free.
Studying Time
Studying Time is the primary studying progress plugin on this checklist that solely is available in a premium model.
Nonetheless, it’s nonetheless fairly inexpensive and gives lifetime updates by way of Envato’s CodeCanyon market.
There are 2 fundamental causes that you simply would possibly wish to take into account Studying Time over the free options:
- 8+ preset types – you get some distinctive fashion choices, equivalent to utilizing vertical bars as a substitute of a stable fill contained in the progress bar (pictured above).
- Superior focusing on guidelines – past focusing on submit varieties and templates, you may goal your progress bars by very particular guidelines equivalent to consumer roles, URLs, units, and extra.
You additionally get all the “customary” options that you simply’d count on from a plugin:
- Versatile positioning – along with automated prime or backside placement, it’s also possible to use customized positioning to stay your progress bar to any CSS selector.
- Fashion choices – past the 8+ preset types, you additionally get common choices to customise the colours and peak of your progress bar.
Worth: Studying Time prices $15, which comes with lifetime updates for a single website and 6 months of assist.
Studying Place Indicator
Studying Place Indicator is one other light-weight free progress bar plugin at WordPress.org.
It doesn’t offer you a ton of settings, however one distinctive choice is that it allows you to use a customized gradient in your studying progress bar (along with a stable shade).
Right here’s all the pieces that you simply’ll get with Studying Place Indicator:
- Prime or backside place – there’s no CSS selector focusing on however you may add an offset.
- Submit sort focusing on – goal your progress bar to particular submit varieties.
- Fashion customization choices – select from stable or gradient shade types. You can too alter the thickness of the progress bar.
Worth: Studying Place Indicator is 100% free.
ReBar
ReBar is one other premium studying progress bar WordPress plugin that’s offered by way of Envato’s CodeCanyon market.
As with Studying Time, listed here are a few of the distinctive options that it gives which may make it price spending the cash:
- 8+ preset types – you get numerous distinctive types that transcend stable shade fills, equivalent to plastic, gradients, iOS-style, and extra.
- Superior focusing on guidelines – past focusing on submit varieties, you may goal your progress bars by very particular guidelines equivalent to consumer roles, URLs, units, and extra.
- Infinite scroll assist – ReBar nonetheless works with infinite scroll layouts, which makes it a fantastic choice for these websites. You possibly can outline the scroll space primarily based on CSS selectors and it’ll generate a novel progress bar for every submit within the infinite scroll.
Listed below are another notable options:
- Horizontal and vertical types – place a horizontal progress bar on the prime or backside of the web page OR place a vertical progress bar on the left or proper aspect of the web page.
- Customizable types – along with the 8+ preset types, it’s also possible to customise the colours and peak/width of your progress bar.
- RTL assist – you may reverse the progress bar for RTL languages.
Worth: ReBar prices $15, which comes with lifetime updates for a single website and 6 months of assist.
Abstract
That wraps up our assortment of the 8 finest studying progress bar WordPress plugins.
For the only choices so as to add a primary progress bar, you may take into account plugins equivalent to Learn Meter or Studying progressbar.
Then again, if you would like probably the most customizability without cost, you would possibly wish to begin with Definitely worth the Learn, because it contains numerous distinctive choices and options that different plugins don’t provide.
If you wish to transcend a stable fill shade for the progress bar, you additionally would possibly wish to take into account the premium choices at CodeCanyon – both Studying Time or ReBar. Once more, probably the most distinctive particulars about these plugins are that each include 8+ preset types and way more superior focusing on choices.
Every plugin has its personal distinctive twist with regards to the fashion and options, so it’s price exploring all of them to seek out the choice that’s proper in your website.
Most of them have free variations at WordPress.org, which makes it simple to check them. When you’re internet hosting your website with Kinsta, you may simply create a staging website to soundly check how every plugin will look in your website.
To search out another plugins that may enhance your website, it’s also possible to browse our full curated checklist of the most effective WordPress plugins.
Save time, prices and maximize website efficiency with:
- Immediate assist from WordPress internet hosting specialists, 24/7.
- Cloudflare Enterprise integration.
- World viewers attain with 34 information facilities worldwide.
- Optimization with our built-in Utility Efficiency Monitoring.
All of that and way more, in a single plan with no long-term contracts, assisted migrations, and a 30-day-money-back-guarantee. Take a look at our plans or discuss to gross sales to seek out the plan that’s best for you.
