Do you want to visually showcase progress, achievements, or goals on your website to better engage your audience? The Progress Bar element in Thrive Architect makes it simple to add clear, interactive progress indicators to your pages.
In this article, we’ll show you how you can add progress bars on a page using Thrive Architect and customize it further.
- Adding a Progress Bar to a Page
- Changing the Template of the Progress Bar
- Using the Main Options of the Progress Bar
- Adding and Customizing Nodes in a Progress Bar
- Styling Elements Inside the Progress Bar
- Using the Other Settings of the Progress Bar
Adding a Progress Bar to a Page
To add the Progress Bar element to a page, begin by opening the page in the Thrive Architect editor. To do so, open your WordPress admin area, Pages >> All Pages, hover on the page you want to edit and click Edit with Thrive Architect.
When the page is opened in the Thrive Architect editor, go to the right panel and click the plus (+) icon.
Clicking on the plus icon will open up the list of Thrive Architect elements to choose from. From this list, drag and drop the Progress Bar element on the page.
When you drag and drop the Progress Bar element on the page you’ll see a popup with progress bar templates to choose from. On this popup, click on the template you want to use.
As soon as you select the template, you’ll see the progress bar added on the page with its settings open in the left column.
Changing the Template of the Progress Bar
Sometimes you may want to change the template of the progress bar after it is added to the page. This can be done using the template setting in the left column.
To do so, first click on the progress bar to open its settings in the left column.
In the left column, click on the Progress bar template name that is currently active.
When you click on the template name, you’ll see a popup with available Progress bar templates that you can choose from.
Note: If you change the Progress Bar template, you will lose all the content that you have added to your existing Progress Bar!
On this popup, click on the template you want to apply to the progress bar.
When you click on the template, the popup will close and you’ll see the new template applied to the progress bar on the page.
Using the Main Options of the Progress Bar
The Main Options of the Progress Bar element allow you to customize the main look and feel of it. They enable you to do the following.
- Selecting the Progress Bar Type
- Inheriting Page Smart Colors
- Showing a Label on the Progress Bar
- Setting the Progress Bar Height
- Managing the Current Progress in the Bar
- Advanced Settings of the Progress Bar
Selecting the Progress Bar Type
Thrive Architect offers two main types of progress bars: Simple and Nodes.
The Simple progress bar displays a regular bar that fills according to the progress made so far. This is perfect for scenarios like showing the completion status of a survey, course, or fundraising campaign, giving users a quick visual cue of how far they’ve come.
On the other hand, the Nodes progress bar presents your progress as a series of nodes, or steps, instead of a continuous bar. This type is especially useful for guiding users through multi-step processes such as onboarding checklists, registration forms, or tutorials, helping to break tasks into manageable parts and increase user motivation.
To select the progress bar type, click on the type you want to enable.
While the Simple Progress bar will have the common settings you see, the Node Progress bar type will have additional settings that we’ll be seeing in this section of the document.
Inheriting Page Smart Colors
If you’re using a Landing Page or a Thrive Theme Builder theme, the color of the element can automatically match the colors set in your theme or landing page template.
To learn more about smart colors and theme colors, check out these helpful articles:
This setting is enabled by default.
If you want to pick your own color instead of using the default template or theme color, just turn off the toggle. This will let you choose a custom color using the color field box.
Showing a Label on the Progress Bar
With the Label setting, you can easily add or remove a label on your progress bar by using the toggle next to the label option. To display the label, or off to hide it, switch it using the toggle button.
Enabling the progress bar label will let you select its position too.
To set the position of the progress bar label, click on the dropdown beside the Progress label position option and select whether you want to display the label, above, below or inside the progress bar.
Setting the Progress Bar Height
The Bar height option lets you manage the height of the progress bar on the page. To alter the height, use the slider or the field beside this option in the left column.
Managing the Current Progress in the Bar
The Current Progress setting lets you manually set the completed percentage of the progress bar, with a default of 20%.
You can adjust this using a slider or by entering a value, and see the fill update in real time.
The progress bar also supports dynamic data sources (like URL QueryString, POST Variable, or Cookie Data) to automatically display the fill percentage. You can read more about using dynamic values in the progress bar.
Advanced Settings of the Progress Bar
The Advanced settings under the Main Options of the Progress Bar element are dependent on the Progress Bar type you select. We’ll see the advanced settings for a Simple Progress bar here and those for a Node Progress Bar type in the dedicated section.
To view and manage the advanced settings, click on Advanced.
Under the Advanced settings you can do the following.
Enable Fill Animation on View
The fill animation setting allows you to decide whether you want to add a fill animation to a progress bar as soon as the progress bar is viewed.
Enabling this setting will fill the progress bar starting from the starting point you’ll set in an advanced setting we’ll see below up to the current progress limit.
To enable this feature, click on the toggle beside the setting.
Select Fill Speed
The Speed setting here will help you decide the speed you want the fill animation to be seen. This setting will only be available when you enable the Fill animation setting.
To select a Fill animation speed, click on Slow, Default, or Fast beside the Speed setting.
Select the Start Percentage
The Start at setting lets you decide where you want to start the fill animation at. This makes it obvious that the start at setting is available only when you enable the Fill animation on view setting.
To set the start at percentage of the progress bar, use the slider or the field beside the setting.
Note: It is recommended that you keep the value of the start at setting lower than the current progress value so the fill animation works as expected.
Enable Dual Progress
Enabling the Dual Progress option lets you display both the current and a secondary progress value, each progressing at its own pace.
This is useful for showing users both their current status and their projected progress after completing the next action.
The Dual Progress option is ideal to be used for onboarding processes, multi-step forms, or goal tracking scenarios, providing clearer visual feedback and motivation.
To enable a dual progress bar, click on the toggle button beside the setting.
The Secondary progress can be displayed as a static value or in dynamic data, and then further adjust it from the slider or by inserting the increment value in the corresponding box.
Adding and Customizing Nodes in a Progress Bar
The Nodes progress bar presents your progress as a series of nodes, or steps, instead of a continuous bar.
This type is especially useful for guiding users through multi-step processes such as onboarding checklists, registration forms, or tutorials, helping to break tasks into manageable parts and increase user motivation.
To transform a simple progress bar to a Nodes Progress bar, in the left column, click on Nodes beside the Type option.
When you enable the Nodes Progress Bar type, the following options work the same as those for the Simple Progress Bar.
- Inheriting page smart colors
- Bar height
- Current Progress (Percentage is replaced by numbers)
While you can refer to the above listed settings from the previous section, here’s a list of Progress bar options when you select the Node type.
- Showing a Label on the Progress Bar
- Adding, Editing, and Deleting Nodes in a Progress Bar
- Advanced Settings of a Node Progress Bar
Showing a Label on the Progress Bar
With the Label setting, you can easily add or remove a label on your progress bar by using the toggle next to the label option. To display the label, or off to hide it, switch it using the toggle button.
Enabling the progress bar label will let you select the position of the labels and the labels you want to display alongside a Node Progress Bar.
To set the position of the progress bar label, click on the dropdown beside the Progress label position option and select whether you want to display the label above or below the progress bar.
To select what progress bar labels you want to display alongside the progress bar, click on the dropdown beside the Display progress labels option and select the labels you want to display.
Adding, Editing, and Deleting Nodes in a Progress Bar
A Nodes type progress bar can have multiple nodes depending on what you are using it for.
The Nodes section under the Progress Bar’s Main Options will let you add, edit and delete nodes in a progress bar.
- Adding a Node in the Progress Bar
- Editing a Node in the Progress Bar
- Deleting a Node in the Progress Bar
Adding a Node in the Progress Bar
To add a node to the progress bar click on + Add.
Immediately after you click Add, you’ll see a new Node added to the Node list.
Editing a Node in the Progress Bar
Editing a node in a progress bar lets you rename that node.
To rename or edit the node, start by clicking on the pen icon on the node.
When you click the pen icon, you’ll see a field where you edit the name of the node and click the checkmark to save it.
Deleting a Node in the Progress Bar
To delete a node from a progress bar, click the trash can icon on the node.
Advanced Settings of a Node Progress Bar
Just like the Simple Progress Bar, the Node Progress Bar advanced settings can be accessed by clicking on Advanced under Main Options.
When you expand the Advanced settings of the Node Progress bar, you can choose to enable a dual progress bar just as we did for the Simple Progress bar.
Styling Elements Inside the Progress Bar
The Progress bar is made up of multiple elements. You can edit each of them by clicking on each element and using its settings in the left column.
The Simple Progress Bar may have fewer elements as it does not have nodes.
The Nodes Progress Bar will have more elements to be edited as compared to the Simple one.
Using the Other Settings of the Progress Bar
Just like the other Thrive Architect elements, the Progress Bar element comes with additional options where you can manage the layout and positioning, borders and corners, background styling, shadows, etc.
To learn more about these options, read the documents listed below.
- Using Typography Options in Thrive Architect
- Using Layout and Position Options in Thrive Architect
- Using the Background Style Option in Thrive Architect
- Using Borders and Corners Settings in Thrive Architect
- Adding Shadows to Thrive Architect Elements
- Using the Responsive Option in Thrive Architect
- Using HTML Attributes in Thrive Architect
We’ve just seen how you can add and customize a Progress Bar element on a page using Thrive Architect. You can take a look at the video below.
Next, do you want to add a Reading Progress Indicator on a page or post? Here’s an article that will help you.