The “Progress Bar” is a data element from Thrive Architect, which might be useful to you when you want to display data (such as percentages) on your website.
This article will explain how to use and customize the element, in order to get the most out of it.
Add the Element to the Post/Page
The first thing you need to do is to add the element to your page, by clicking on the plus sign of the right sidebar:
Look for it within the available list of elements, either by scrolling down until you find it, or you can simply type the name in the search field:
Once found, drag and drop it to your page:
As soon as you do that, the template library will show up on the screen, from where you can pick a template for your progress bar:
Now your “Progress Bar” element has been added to your page, and you can start customizing it using the “Main Options” of the left sidebar:
Choose the Template
The first section of the left sidebar options is the templates library. If you click on the available field, you will be able to open once more the library and change the current template of the element:
Use the Main Options
The “Main Options” come with a variety of features that you can use, such as changing the type of the element, the color, labels, and position, as well as with some advanced options:
This option allows you to choose whether you want to have a “Simple” or a “Nodes” progress bar type:
If the "Nodes" type is selected, you will have several additional options in the left sidebar, which we will look into further along in this article.
Inherit page smart colors
If you're using a Landing Page, or Thrive Theme Builder theme, the color of the element can be inherited either from the Thrive Theme Builder template or from the Landing Page:
You can read more about what are smart colors and theme colors in these two articles linked below:
If you don't want to use your template or theme color, simply deactivate the toggle.
Use this option if you want to change the color of the element. In order to do that, click on the color box next to the option:
Use the color picker to manually select the color or insert the HEX / RGB code in the corresponding field:
After you are done, don’t forget to click on the “Apply” button to make sure all your changes have been saved:
Use the toggle next to this option if you want to show or hide the label of the progress bar:
Progress label position
If you opt for having the label displayed, then this option will be available in the left sidebar:
Open the drop-down and use one of the available options to place the label within your progress bar:
Display progress labels
The "Display progress labels" is an option that can be used only if the "Nodes" type of the progress bar is selected:
Click on the drop-down field to view the full list of available labels:
You can choose to display "All" labels or just the "Current" progress of the element, or, if you want, you can display the "First & last" labels:
Note: you can also customize the names of the labels from the left sidebar options:
You can "Add" (1) new labels, change the name (2) of the currently existing ones, remove labels (3) and lastly, move them around (4) in order to change their position within the progress bar:
Use the slider underneath this option to decide the height of the progress bar, or simply insert a numerical value in the field next to the slider:
The "Current progress" option allows you to set the amount of completed percentage of the progress bar. The option is set by default to “percentage” with a value of “20%”:
Drag the slider or insert a percentage in the numerical field, and see how the progress bar "fill percentage" changes:
The element can support dynamic data such as a "URL QueryString", "POST Variable" and "Cookie Data" to populate it:
You can therefore use automatic data to reflect the actual "fill percentage". Read more about how to use this feature in this dedicated article.
These options are available only then the “Simple” type of progress bar is selected:
After you click on the downwards pointing arrow, the full list of options will expand :
Fill animation on view
When this option is active, you will be able to set the progress bar to "fill up" from the defined starting point ("Start at") until it reaches the "Current progress" bar value:
So if the "Current progress" value is set at "50%", and your "Start at" value is "20%", the animation would look like this:
You can also choose between three different types of speed for how fast the progress bar fills up:
Set the starting point of the progress bar, either by using the slider or by adding a numerical value in the corresponding field:
Enable dual progress
Lastly, if you activate the toggle next to “Enable dual progress”, you will be able to set a “Secondary progress” value:
This secondary progress will fill up along with the "Current progress" one, but at a different speed:
This is how this feature works for the "Simple" type of progress bar. However, you can use this feature with the "Nodes" type as well.
You just need to make sure the "Nodes" type is selected, and then activate the toggle from the "Advanced" section:
Once you do that the following options appear in the left sidebar:
You can, therefore, display a "Secondary progress" in percentage or in dynamic data, which will show up in the second node of your progress bar:
You can add more than just two or three nodes, and customize the progress to your liking.
In the below example we have five nodes, and the secondary progress value is "three", meaning that it will be shown for the first three nodes:
If you want to customize your "Progress Bar" element even further, you can do so by accessing the "Currently styling" options of the left sidebar.
Select an item of the progress bar, and this will automatically trigger the additional options:
You can also check what item is selected in the breadcrumbs of the page:
Depending on whether you have a "Simple" or "Nodes" type of progress bar, the options available in the drop-down list might look different, but here's an example of what items you can edit if you are using a "Nodes" type of bar:
Let's edit, for instance, the "Incomplete icons". As soon as you select it from the drop-down list, a green lock will appear in the progress bar, showing you which item you have locked for editing:
Now you can use the "Main Options" section of the left sidebar to change all "Incomplete icons" from the current progress bar:
However, should you wish to edit each icon individually you simply have to click on the lock, which will automatically turn red - and this means it's unlocked for individual editing:
Now any change you apply to the selected icon, will only be visible on that particular item.
Use the Rest of the Options
If you want to learn how to use the rest of the options from the left sidebar, make sure to take a look at the articles and tutorials from our knowledge base.
I hope you found useful this article about how to use and customize the "Progress Bar" element.
If that’s the case, make sure to reward our efforts by leaving a smile below :)