Table Of Contents

Advanced Progress Bar Widget

How to Use Advanced Progress Bar Widget – Element Pack Exclusive

A progress bar can be used to show a user how far along he/she is in a process. The guideline below about the Advanced Progress Bar widget will get you to walk in the right way to use the widget developed by Element Pack.

Moreover, I’ll guide you in different phases of how you can insert & use the widgets to design layout for the content (text, image, and video, etc.)  you want to work with and style as well.

Content Tab

The Content Tab having some handy sections for making an attractive web page will genuinely get you to have a structure of the web content (text, image, video, etc.).

Progress Bars

After dragging and dropping widgets in a new section, you will get a list group. The list is not limited, you can add a new list in the list group just by clicking on the ADD ITEM button.

Advanced Progress Bar Widget

You can edit every single list item. Simply, hit on the List Item and edit the field provided by the List Item, and set Name, Level, Text, Level, and Base Color included by the list item.

list items for the progress bar

If you have to get the same designed content, you’ll be able to duplicate clicking on the duplicate icon and delete clicking on the delete icon.

color maps

One more thing, if you want an individual bar to design, you can do that by just editing every single bar under Progress Bar option. So, simply go Content Tab > Progress Bars.


On the contrary, if you want global design (the same design) for every single bar, you need to go to Style > Progress Bars.

advancedprogressbar widget shot 3 - BdThemes

Moreover, in the Progress Bars section, you’ll be able to determine the text position Text Outside Top, Text Inside, Text Outside Bottom. As you see in the demonstration above.

Style Tab

Now, let’s work with the Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you want to design.

Progress Bars

style tab

If you want to set height, space, border-radius, box-shadow, and padding for every single bar, you need to go to Style > Progress Bars.


content body

From this section here, you’ll be able to design the bars globally, especially text, level, and base color with typography and text Shadow. Just go to Style Tab > Content.

Importantly, for having a global design to bar, you’ve to remove the text, level, and base color of the individual bar from the Progress Bars under the Content tab.

Video Tutorial

For more details, see the video above.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design. 

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.