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.

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.


Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Enjoy Black Friday Exciting Deals Right Now. Check Here
© Copyright 2021 All Rights Reserved by BdThemes

Enjoy Black Friday Exciting Deals Right Now. Grab The Deals Before The Time Ends!