We are happy to share that the Reading Progress Bar is now available in HappyAddons’ free version. There are three types of reading progress bars available in our feature. Here are those –
- Horizontal Reading Progress Bar (Top or Bottom Bar)
- Vertical Reading Progress Bar
- Circle Reading Progress Bar
You can set a reading progress bar for all Blog Posts and Pages or only one type of content. Also, you can disable it from any specific page. So it’s a full set of premium reading progress bar features in the Free version of HappyAddons.
Here is the overview of the reading progress bar feature:
Required Plugins:
Here are the required plugins –
- Elementor Free
- HappyAddons Free
How to Use the Reading Progress Bar of HappyAddons
To use the feature first check whether it’s enabled or not from your site’s backend’s HappyAddons Feature settings page. It’s just for checking the feature is on or off.
After enabling the feature you have to configure the feature. To activate the feature you have to go to the Elementor’s Site Settings panel. You can open the site settings from the Elementor’s editor panel. Then scroll down and open the tab of the Reading Progress Bar. You can open the site settings from any page’s or theme builder’s editor panel. See the process –
Reading Progress Bar Visibility Modes:
We have two types of visibility modes.
- Global Mode: You can set the global mode for overall all pages and posts. Also, you can turn it off for specific pages.
- Individual Mode: Set the feature for individual mode. Now you have to configure the progress bar from the specific page where you want to show the progress bar.
Here you go –
Configure the Reading Progress Bar for the Global Mode
In this part, we will show what you will get in the global mode and the process of turning the progress bar off for the specific section.
While configuring the reading progress bar in the global mode, you can choose the places where you can set the progress bar. For now, we have two places,
- All Posts
- All Pages
Now Turing Off the Progress Bar from a Specific Page:
You can turn off the progress bar from the specific page from the Elementor’s page settings. Here is the process,
Configure the Reading Progress Bar for the Individual Mode
Now we will show the process for the Individual mode of the Reading Progress Bar. To have that you have to select the individual mode.
After selecting the mode you will get the notice like this,
Note: Please go to page settings and configure the feature settings individually.
Now you have to go to the specific page where you want to add the reading progress bar and hit the Edit with Elementor Button from the top bar. Or you can do that from the pages of your dashboard. No matter. at all. Then you have to the page settings option from there.
After clicking the settings icon you will get the page settings, then scroll down and you will find the progress bar tab, open it. And then you will have the option to turn on the progress bar for that page. Here is the process:
Styling Process of The Reading Progress Bar
You have successfully enabled the feature for your site. Now it’s time to check how you can style the reading progress bar. As we have three types of reading progress bars. So we will cover it one by one.
Note: The Styling process for the global mode and the Individual mode is the same. You have to style the progress bar from the Elementor’s Site Settings Panel. From where you have set the modes.
Styling the Horizontal Reading Progress Bar:
You can select the Horizontal reading progress bar for the top position and the bottom position of your site.
Setting the Height for the progress bar:
From the Height range slider option you can set the height for your bar.
Giving color to the bar:
From the Fill color field, you can set the bar color and from the background color option you can set the progress bar’s background color.
Now Styling Percentage Tool Tip
You can turn off the percentage tooltip. By default, we have made the option on for all. Also, you can style the tooltip from the Percentage Tool Tip options. We have typography settings too. Here is the process –
Styling the Vertical Reading Progress Bar:
Now we will show the process of styling the Vertical Reading Progress Bar. From the types you have to select the Vertical Bar. You will two positioning.
- Left Vertical Bar
- Right Vertical Bar
Here is the process:
Note: There will be no tooltip for the vertical scrolling reading progress bar.
Customizaing the Vertical Reading Progress Bar:
You get the same color control (Fill color, Background Color) for the vertical progress bar. Also, you can control the width here. Here is the settings panel –
Enabling the Circle Reading Progress Bar and Styling this:
It’s time for styling the unique styled progress bar – Circle Reading Progress bar. From the type dropdown you can enable the Circle progress bar. Here is the process –
Setting the position for the Circle Progress Bar –
From the position control drop down option you can set the position for the circle progress bar.
Controling the Size and Offset for the Circle Progress Bar:
We have settings for the Size control and offset settings. Size range bar will help you to adjust the size of the circle. From the Offset settings you can adjust the placement of the Circle Progress Bar. We have different controls for the Horizontal and Vertical positioning. Here is the whole process –
Color customization for the Circle Progress Bar:
You can set the fill color and background color. Also There is option for controlling the widths of the circles.
Here is the process:
Percentage control for the Circle Progress Bar:
We have option to turn off the percentage number. Also has the typography and color settings for the percentage for the Circle Progress Bar.
Finally, we have successfully covered the all the settings for the Reading Progress Bar feature of HappyAddons. Now try it from your end.
