How to configure and style Progress Bar Widget.
Add a user-friendly feature to your site that displays progression of any attributes in a handsome style using Exclusive Addons Progress Bar Widget for Elementor.
STEP 1:
Select the ‘Progress Bar’ widget from Elementor panel. Then drag and drop it in the selected area.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/progressbar-1.png)
STEP 2:
Content section consist of ‘Progress Bar Title’ and ‘Percentage Value’. In title section you can give Progerss bar title. You also can set percentage value of the progress bar.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/progressbar-2.png)
STEP 3:
Style section consist of ‘General Style, ‘Title’, ‘Front Bar’, ‘Back Bar’ and ‘Percentage Value’.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/progressbar-3.png)
3.1. In General style section you can find style preset. You can set ‘Line’, ‘Line Bubble’, ‘Circle’, ‘Half Circle’ as style.
![](https://exclusiveaddons.com/wp-content/uploads/2019/12/progressbar-4.png)
3.2. You can set ‘Title Color’ and ‘Typography’ in title section.
![](https://exclusiveaddons.com/wp-content/uploads/2019/12/progressbar-5.png)
3.3. In ‘Front Bar’ section you can apply Color and Width.
![](https://exclusiveaddons.com/wp-content/uploads/2019/12/progressbar-6.png)
3.4. Back Bar consist of color and width.
![](https://exclusiveaddons.com/wp-content/uploads/2019/12/progressbar-7.png)
3.5. In ‘Percentage Value’, you can set text color, typography, background color, border, padding and box shadow.
![](https://exclusiveaddons.com/wp-content/uploads/2019/12/progressbar-8.png)
STEP 4:
Finally, after clicking the update button you will see the beautiful Progress Bar on your webpage.
![](https://exclusiveaddons.com/wp-content/uploads/2019/12/progressbar-9.png)