Progress bar

Introduction

The Progress Bar widget from Animation Addons adds dynamic progress bars to track goals and achievements. Customizable and easy to integrate with Elementor.

Note: Before using the Progress Bar widget, ensure that you have the Animation Addons plugin installed and activated on your WordPress site.

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 a Button widget ?

To activate the Progress Bar widget, navigate to:
Animation Addons → Elements from your WordPress dashboard.
Then, find the Progress Bar Widget in the list of available widgets and toggle it on to enable the widget. Once enabled, click Save Settings to finalize the activation.

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

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

In the Elementor Editor, click the ‘+’ icon to add a section. Search for the “Progress Bar”, then drag and drop it into the desired section of the page. Configure the widget settings under the available tabs to customize it as needed.

Here’s the interface where you can configure the settings and customize the Testimonial Widget across various tabs. 

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

I have selected style number two, but you can choose the one that suits you best.

Progress Bar

• In this section, you can customize the percentage you want to display and decide whether the percentage number should be shown. Adjust these settings according to your preferences using the Progress Bar options.

I have set everything according to my design preferences, but you can adjust them as per your own preferences and design needs.

—————————————————————————————————————————-

Style Settings

• Now it’s time to style your progress bar and make it shine using the progress bar and percentage options.

• I changed the color, stroke, and trail width but didn’t adjust the size, as I felt it wasn’t necessary.

• I adjusted the percentage style by changing only the color and left the other settings unchanged. You can experiment with them to see the difference.

Here is the final output after completing all the customizations. Feel free to adjust any settings according to your preferences to further enhance your 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!