How To Create and Customize Progressbar In Elementor. How to Add and Customize the Progress Bar Element in Elementor The Progress Bar Element by Master Addons is a dynamic widget used to visually represent skills, completion rates, loading status, or statistical progress. It offers several unique presentation styles to make data clear and…

How to Add and Customize the Progress Bar Element in Elementor #

The Progress Bar Element by Master Addons is a dynamic widget used to visually represent skills, completion rates, loading status, or statistical progress. It offers several unique presentation styles to make data clear and engaging.

Using the Progress Bar Element, you can:

• Select from distinct Style Presets like Line, Line Bubble, Circle, or Fan.
• Set the Title to label the progress bar (e.g., “Web Design Skill”).
• Define the colors and width/thickness for both the Front Bar (progress) and the Back Bar (background track).
• Customize the Typography and Color of the Title and the numerical Value displayed.

So, let’s see how to add and customize this element.

Adding and Configuring the Progress Bar Element #

Follow these steps to add and configure the Progress Bar Element on any page of your website.

Step 1: Create or Edit a Page #

1. From your WordPress dashboard, go to Pages → Add New to create a new page. You can also select an existing page and click Edit.
2. Next, click the “Edit with Elementor” button.

Step 2: Find the Progress Bar Element #

1. In the left-hand Elementor panel, use the search bar to find “Progress Bar.”
2. Drag and drop the addon onto your desired section of the page.

Step 3: Customize the Progress Bar Settings #

After placing the addon, you’ll find the customization sections in the left-hand panel, primarily under the Content (implied) and Style tabs.

Content Tab (Implied Setup) #

• Progress Percentage: (Implied field) Set the final progress value (e.g., 85).
• Title: (Implied field) Enter the label for the progress bar (e.g., “SEO Optimization”).
• Style Presets: (Implied, also shown in Style tab) Select the visual format: Line, Line Bubble, Circle, or Fan.

Style Tab #

This is where you control the visual appearance of the bar and its text.

General Styles: #

• Style Presets: Select the display format: Line, Line Bubble, Circle, or Fan.

Title: #

• Title Color: Set the color of the progress bar label text.
• Typography: Use the Edit button to set the font, size, and weight for the title text.

Front Bar (The progress indicator): #

• Color: Set the color of the filled portion of the progress bar.
• Width: Set the thickness/height of the progress bar itself (e.g., stroke width for circle/fan, height for line).

Back Bar (The background track): #

• Color: Set the color of the unfilled track behind the progress bar.
• Width: Set the thickness/height of the background track (should typically match the Front Bar Width).

Value (The numerical percentage): #

• Color: Set the color of the percentage number displayed.
• Typography: Use the Edit button to set the font, size, and weight for the percentage number.

Step 4: Save and Publish Your Page #

Once you’ve customized everything to your liking:

1. Click the “Publish” button (if it’s a new page) or “Update” (if editing an existing page).
2. Visit your page on the frontend to preview the animated progress bar.