Please note that our Legacy Themes have been replaced by new Thrive Theme Builder Themes. While our Legacy Themes are still functional, we are no longer actively developing them. Check out this course to find out how to switch your site to Thrive Theme Builder.

We also have a separate article about the "Progress Bar" element that might be useful.

To add an animated progress bar to your content, you need to click on the Thrive Themes shortcode drop-down in your WordPress editor and select “Progress Bar”:

As you click on it, you will find this window pop up with the following shortcode options:

1. Label text

Set the text you want to appear ​as a label for your animated “Progress Bar”.

2. Fill Percentage

Here you can set how much you want the counter to be filled​​.

3. Color

Set the color you want to apply on your “Progress Bar”.​

4. Add progress bar

You can have multiple progress bars appearing below each other​. By clicking on the "Add progress bar" button, three new fields appear that allow you to set label text, fill percentage, and color for the second, third, etc. progress bar.

5. Insert

When you are done with all the settings, click on "Insert". The “Progress Bar” will be added to your content.​​

Here is an example of how the “Progress Bar” looks like using the FocusBlog Theme:​

Note that it can look differently depending on the theme you are using.


Please note that in order to use the Shortcodes as they are described in this article, you have to install the "Classic Editor" plugin. Check out this article to find out more about how to install and use the plugin.

Did this answer your question?