How Can We Help You?

Progress Bar

How To Use A Progress Bar Widget Of UBE Addons

Progress Bar lets you easily visualize progression in specific fields with lots of layouts & styling options. With this element, you can showcase your skills or statistical information of your company in an eye-catchy manner.

Using Progress Bar:

You can see the below video to get an insight into how you can use the Progress Bar Widget to create beautiful designs. Or you can follow the documentation whichever you find convenient.

How to Activate Progress Bar

To use this UBE Addons element, find the Progress Bar‘ element from the Search option under the ELEMENTS tab. Simply just Drag & Drop the UBE Progress into the Drag widget here‘ or the ‘+’ section.

How to Configure Content Settings

Under the ‘Content’ tab, you will find the Progress Bar sections.


Style Choose the default style of progress
Alignment Alignment for the value and label of the progress bar in case Style is Style 02 and Style 04
Type Select the type of progress
Color  Select the available color according to the color of the bootstrap
Display Value Allow display value or not

You can add the number of progress bars you want by clicking the “+ Add Item” button, each item includes:

Label Enter the label of the progress bar
Value The value of the progress bar, the maximum is 100
Speed (milliseconds) Enter the speed of the animation, the unit is milliseconds
Custom Color Allow custom color or not
Color Choose the color of the value
Background Color Choose background color of the value
Fill Color Choose the background color of the value range
Background Color Choose background color of the value
Arrows Color Choose background color of the arrow

How to Style Progress Bar

Switch to the ‘Style’ tab to style all the elements of Progress Bar.


‘Progress’ section lets you add Spacing, Background Color, Height, Border Radius to the text of Progress.


‘Fill’ section lets you add Padding and Background Color to Progress, Indicator Size, Background Type, Border Type, Border Radius to the Indicator of Progress.

‘Label’ section lets you add Spacing, Typography, Color to the Label of Progress.

‘Value’ section lets you add Icon Size, Color, Background Color, Border Radius, Padding, Margin to the Value of Progress.

Final Outcome

By following these mentioned steps and a bit more modifying & styling, you can easily design your Progress Bar as per your preference.

By using UBE Progress Bar, this is how you can easily put the spotlight on your significant contents & make them appealing to your visitors.

Getting stuck? Feel to Contact Our Support for further assistance.