Turn Your Minimum Efforts Into Maximum Results
  • Products
      Explore package advantages
  • Support
  • Blog
  • Contact

Table Of Contents

How To Use The Advanced Progress Bar Widget By Element Pack Pro

In this documentation, we will discuss the customization of the Advanced Progress Bar widget.

Inserting The Advanced Progress Bar Widget

Inserting The Advanced Progress Bar Widget

On the Elementor editor page, Just Search by the widget’s name and it will appear. Then just drag it and drop it on the page.

Work With Content Tab

Progress Bar section

Go to Content > Progress Bar


Progress Bar Section Customizations

Here, you can easily add a Progress Bar item by clicking Add Item button. Otherwise, you may increase the Items by clicking the Duplicate Sign symbol and you can also decrease/remove your item by clicking the Cross sign as shown in the screenshot above.


Clicking on a Progress Bar item, you will get to change the Name, Max Value, Level ( Out Of Max Value), Text Color, Base Color, and Fill Color to set up your Progress Bar items.


From this section, you can also change the Animation Speed, Progress Style, Additional, and Text Position as your wish. If you select the Additional Style then you will get the option to control the Additional Animation Speed and you can easily change the animation speed.

In this section, you will get two switcher buttons Like Show Percentage and Show Max Value and you can easily On/Off these switcher buttons to show/hide these elements from The Editor page.

Work with The Style Tab

Progress Bars section

Go to Style > Progress Bars

Style The Progress Bars Section

Come to the Progress Bars section, you can set the Progress Bar Height, Spacing Between, Border Radius Level, Border Radius Fill, and Box Shadow as in like above screenshot.

Content section

Go to Style > Content

In this section, you can customize the Text Color, Base Color, and Fill Color as your wish. Here you can give the Rainbow Color Name from Rainbow Color Box and set the Typography and Text Shadow from here.

Percentage section

Go to Style > Percentage

Come to the Last section of the widget, you can change the Percentage Color, Background Type, Size, Vertical Position, Horizontal Position, Typography, and Border Radius like in the above screenshot.

All done! You have successfully customized the Advanced Progress Bar widget on your website.

Video Assist

You can watch this quick video to learn about the Advanced Progress Bar widget. Please visit the demo page for examples.

Thanks for staying with us.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.

Subscribe to newsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Join Now

Join Thousands of Happy Users

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge