1. Home
  2. Docs
  3. Xpro Elementor Addons
  4. Free Elementor Widgets
  5. Progress Bar

Progress Bar

How to Install Elementor Progress Bar Widget

Xpro Progress Bar Widget for Elementor is an all-in-one powerhouse widget to create fully styled, vibrant progress bars for your websites. Elementor Progress Bar Widget is best for showcasing skills, and stats and visualizing the progress of the project. Our Elementor Progress Bar widget comes with 15 unique style options to create well-designed progress bars in no time.

You can separately style the title, counter, track, and bar to maximize the look and enhance the overall visibility of your site’s progress bar. Play around with your creativity and entice your visitor. Let’s dig deep and find out how you can use this amazing widget to the best of its potential.

Requirement

You need to install and activate the free version of Xpro Elementor Addons. If you already have the plugin installed, just make sure the Hotspot Widget is ‘Enabled’, so you can find it in the Elementor editor.

To enable the widget, simply follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

From the Xpro Addons Dashboard, click on the Widgets Tab, find the Progress Bar widget, and finally, toggle the button ON to enable it.

How to Use Xpro Progress Bar Widget for Elementor

You can create fabulous progress bars for your websites to track the success of a project in a matter of time with our Progress Bar Widget. Get instant engagement on your elementor website by grabbing the attention of your visitors. It’s simple, fun, and time-saving! Here’s how to use our robust Elementor Progress Bar Widget.

Step 1

Click on the Xpro Addons section available in the Elementor Editor.

Step 2

From the Xpro Addons section, simply drag’n’drop the Progress Bar Widget on your desired page location.

This is the default view of our Xpro Progress Bar Widget.

How to add content in Xpro Progress Bar Widget in Elementor

Starting from the default view of the progress bar from the General Section. You can easily add the title, percentage, and animation duration to your progress bar. You can also choose from any of the styles from the 15 unique Style options. Similarly, you can add multiple bars to showcase the skills and stats of a respected project.

How to style Title and Counter in Xpro Progress Bar Widget in Elementor

Simply head towards the Title Section under the Style Tab. Here you can add typography and color of your choice that suits best with the design of your website. Exactly the same way you can style your counter digits from the Counter Section. You can also color the shape on the counter separately.

Check out the best Elementor theme builder to customize default theme templates for header, footer, single page, single post, blog archives, author archives, and much more.

By Xpro Elementor Addons

How to style Track in Xpro Progress Bar Widget in Elementor

Simply toggle towards the Track Section under the Style Tab. At first, you can adjust the height of the bar. Then you can choose a color for your track. You can either choose between a classic or a gradient option. In this section, you can also add a shadow and a border to the bar.

How to style Bar in Xpro Progress Bar Widget in Elementor

Once you are done with the previous styling option, you can jump on to the most important part. Styling the bar from the Bar Section. Here you can turn on the striped option and style the bar best according to your design layout.

The final result will look something like this every time a new visitor will visit your page.

That is all from our Progress Bar Widget for Elementor. I hope now you have a better understanding of how to fully utilize our easy-to-use Progress Bar widget by Xpro and create the best suitable Progress Bar for your websites to showcase progress or stats. Moreover, if you want to create an attractive and breathtaking carousel gallery for your elementor site then instantly head over to our doc of Xpro Elementor Carousel Gallery Widget.

Create amazing WordPress websites using our free Elementor addons. Check the full list of best Elementor widgets and get started quickly.

How can we help?