Progress bar

Before setting up the Progress Bar Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Progress Bar Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

The Progress Bar widget adds dynamic, customizable progress bars to track goals and achievements in Elementor.

Key Use Cases for the Progress Bar Widget in Elementor:

• Use the Progress Bar widget to visually display progress, goals, or achievements on your website. 
• Customize the appearance, colors, and animations to engage users and track measurable progress effectively.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Progress Bar Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Progress Bar Widget in the list.
• Toggle it on to enable the widget.

Now, the Progress Bar Widget is ready to use!

How to Add the Progress Bar Widget in Elementor

1. Open the page where you want to add the Progress Bar.
2. Launch Elementor editor.
3. In the Elementor panel, search for “Progress Bar.”
4. Drag the Progress Bar widget to your desired section.
5. The Progress Bar widget will now be available for customization.

How to Configure the Progress Bar Widget in Animation Addons:

• In the Elementor panel, search for the “Progress Bar Widget.”
• Drag and drop the widget into the desired section.
• Customize the progress bar settings using the available options in the Elementor panel.

Your Progress Bar Widget is now ready to use! You can adjust the progress percentage, style, and animations to match your design needs.

Configuring Progress Bar Widget : A Step-by-Step Guide

Once the widget is added to your page, you can configure its settings under different tabs: Content, Style, and Advanced.

Content Settings

You will find two options: Layout and Progress Bar.

Layout 

In the Layout section of the Progress Bar widget, you’ll only find the Style option. You can choose from three preset styles to match your design preferences:

• Style One
  
• Style Two
  
• Style Three

Each style gives your progress bar a different visual appearance. Simply select the one that fits your page’s design best—it’s that easy!

Progress Bar

From the Progress Bar settings under the Content section, you can control:

1. Percentage – Adjust the progress using the slider or input box. You can set it anywhere from 0 to 100 depending on what you want to display.
   
2. Display Percentage – Toggle this option ON/OFF to either show or hide the numeric percentage on the progress bar.
   

This section helps you define how far along a task or goal is visually and numerically. Let me know if you want help with the Style section too!

Style Settings

From the Style tab of the Progress Bar widget, under the Progress Bar section (as shown in your screenshot), you can customize the appearance with the following options:

Progress Bar

• Color – Choose the color of the progress bar (the filled portion).
  
• Background Color – Set the background color of the bar (the unfilled portion).
  
• Stroke Width – Adjust the thickness of the progress stroke (the main progress line).
  
• Trail Width – Modify the width of the background trail line behind the progress.

These settings help you design the progress bar to match your site’s branding or desired visual style. Let me know if you want help describing the Percentage section or the Advanced tab!

Percentage

Under the Style tab of the Progress Bar widget, the Percentage section lets you style the percentage text displayed on the bar. Here’s what you can customize:

• Color – Change the color of the percentage text to match your design.
• Typography – Customize the font, size, weight, and other text styles.
• Position Y – Adjust the vertical position of the percentage label along the Y-axis. (e.g., move it up or down over the progress bar).

These settings help make the progress bar more visually appealing and aligned with your site’s design. 

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Progress Bar widget in Elementor to create customizable, clickable buttons on your website.

For any further assistance or inquiries, feel free to contact our support team!