Progress Bar Element

Last Update: January 5, 2026

Avada includes multiple animated counter Elements, including the Progress Bar Element. These are great for displaying varying types of data and content to your viewers. The Progress Bar Element includes several options for easy customization, and is a great way to attract the viewer and display content visually.

Watch the video below for a visual overview of the Element, view the Avada Progress Bar Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Progress Bar Element

The Progress Bar Element is a great way to display the progress between two figures. Setting the Active Value determines the placement of the progress on the bar, and the Maximum value can be set as an integer or float to denote the maximum value of the progress bar. The value set here will serve as the 100% meassure.

The value can be displayed as a value or a percentage, and there is a Stock Mode for displaying how much of a product line is remaining. As such, the Progress Bar Element is very flexible in its application. You can display values, text and units for both active values and maximum values, and there are a range of design options around alignment typography and color. The Progress Bar Element is a very versatile element that can be used in many ways. Check out the video above for more infomration and a visual overview of the element.

Element Options

Note: The Default setting will use the global settings assigned for this element in your Options > Avada Builder Elements > Progress Bar section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

Heading		Description
Active Value		Use an integer or float here to denote the active value of the progress bar.
Maximum Value		Use an integer or float here to denote the maximum value of the progress bar. The value set here will serve as the 100% measure.
Value Display Type		Select if you want to display the set values or their corresponding percentage value.
Stock Mode		If set to "yes", the bar will handle active and maximum values as "already sold" and "still available, so the numbers will be added up before the percentage is calculated.
Filling Speed		Set the fill animation speed. In milliseconds.
Active Value Text		Additional text for the active value.
Display Active Value		Select if you want to display the active value.
Active Value Unit		Insert a unit for the active value. ex %.
Active Value Unit Position		Choose the positioning of the active value unit.
Maximum Value Text		Additional text for the maximum value.
Display Maximum Value		Select if you want to display the maximum value.
Maximum Value Unit		Insert a unit for the maximum value. ex %.
Maximum Value Unit Position		Choose the positioning of the maximum value unit.
Margin		Enter values including any valid CSS unit, ex: 4%.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Active Value Text Position		Select the position of the active value text. Choose "Default" for Global Options selection.
Active Value Text Align		Choose the alignment of the active value text.
Maximum Value Text Position		Select the position of the maximum value text. Choose "Default" for Global Options selection.
Maximum Value Text Align		Choose the alignment of the maximum value text.
Active Value Typography		Controls the active value typography.
Maximum Value Typography		Controls the maximum value typography.
Striped Filling		Choose to get the filled area striped.
Animated Stripes		Choose to get the the stripes animated.
Progress Bar Height		Insert a height for the progress bar. Enter value including any valid CSS unit, ex: 10px.
Filled Color		Controls the color of the filled in area.
100% Filled Color		Controls the color of the progress bar when fully filled.
Unfilled Color		Controls the color of the unfilled in area.
Border Radius		Enter values including any valid CSS unit, ex: 10px or 10%.
Filled Border Size		In pixels.
Filled Border Color		Controls the border color of the filled in area.

Extras

Heading		Description
Conditional Rendering		Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results.