Progress Bar Element

Last Update: March 30, 2024

Avada includes multiple animated counter shortcodes, including the Progress Bar Element. These are great for displaying varying types of data and content to your viewers. The Progress Bar Element include several options for easy customization, and is a great way to visually attract the viewer and display content. read below to find out more about this visual element.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Progress Bar Element

To start, add the element into your desired column. That will open the element’s settings. This element has only one Options panel, and the options are quite straightforward. Initially, you choose the height of your progress bar and then select where you want to display the text. It can be On, Below, or Above the bar itself. The next two options are about whether you want to show the filled area number and any chosen unit on the bar. For example, it could show 85%, just a number, or it could not show at all. The option below this, the Filled Area Percentage, is what determines how much the bar is actually filled with color. Under that, you can choose the color of the fill, the border color and size, the unfilled color, and whether you want the filled area to be striped. You can even animate the stripes!

Once you have configured the styling options, the last thing to do is add any text you want on the bar and choose its color. That’s it. To have multiple bars, the easiest way is to then duplicate the element and edit the cloned instance of it.

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

HeadingDescription
Filled Area PercentageFrom 1% to 100%.
Progress Bar TextText will show up on progress bar.
Display Percentage ValueSelect if you want the filled area percentage value to be shown.
Progress Bar UnitInsert a unit for the progress bar. ex %.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Text PositionSelect the position of the progress bar text. Choose "Default" for Global Options selection.
Text AlignChoose the alignment of the text. If the text position is "On Bar", the alignment will work only if the bar is filled over 35% percent.
TypographyControls the text typography.
Striped FillingChoose to get the filled area striped.
Animated StripesChoose to get the the stripes animated.
Progress Bar HeightInsert a height for the progress bar. Enter value including any valid CSS unit, ex: 10px.
Filled ColorControls the color of the filled in area.
Unfilled ColorControls the color of the unfilled in area.
Border RadiusEnter values including any valid CSS unit, ex: 10px or 10%.
Filled Border SizeIn pixels.
Filled Border ColorControls the border color of the filled in area.

In this article