---
title: "How to Add Progress Bar in Elementor WordPress?"
url: https://theplusaddons.com/docs/progress-bar-settings-overview/
date: 2024-03-29
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "The Plus Addons for Elementor's Progress Bar widget displays data and statistics in an interactive, visually appealing way. It comes in a linear bar style and a circular (pie chart)..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Add-Progress-Bar-in-Elementor-WordPress_-1024x536.jpg
word_count: 392
---

# How to Add Progress Bar in Elementor WordPress?

## 

- The Plus Addons for Elementor’s Progress Bar widget displays data and statistics in a linear bar or circular pie chart style, with icon, image, and Lottie support.
- The Plus Addons for Elementor marks Progress Bar as a free widget, so it works with The Plus Addons for Elementor installed and does not require a Pro licence.
- The Progress Bar linear style uses the Dynamic Value (0-100) slider to control the visual fill, and a front-end test at 72% shows the bar filling proportionally while the Number text field can show a different figure.

The Plus Addons for Elementor's Progress Bar widget displays data and statistics in an interactive, visually appealing way.

It comes in a linear bar style and a circular (pie chart) style, with icon, image and Lottie support.

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/progress-bar/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Edition:** Progress Bar is a **free** widget - it works with just The Plus Addons for Elementor installed, no Pro licence required.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Progress Bar** and turn its toggle on.

## How to Activate the Widget

Go to **The Plus Addons > Widgets**, search for **Progress Bar** and turn on its toggle.

## Key Features

- **Linear bar** - a horizontal progress bar that fills to a percentage.- **Circle / Pie Chart style** - see the Limitations note below before using this.- **Icon, Image or Lottie** support alongside the bar.

## Steps

Add the Progress Bar widget to the page.

### Layout

From **Main Style**, choose **Progress Bar** (the default, a linear bar) or **Pie Chart** (a circular bar).

![Main Style control set to Progress Bar](https://theplusaddons.com/wp-content/uploads/2026/09/progress-bar-main-style.webp)

For the linear bar, the **Dynamic Value (0-100)** slider sets how much of the bar visually fills. This number drives the fill animation only - it is not shown as text by itself.

![Dynamic Value (0-100) slider](https://theplusaddons.com/wp-content/uploads/2026/09/progress-bar-dynamic-value.webp)

### Icon

From **Select Icon**, choose **None**, **Icon**, **Image** or **Lottie**.

![Select Icon control with its four options](https://theplusaddons.com/wp-content/uploads/2026/09/progress-bar-select-icon.webp)

## Settings Overview

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Main Style | Progress Bar (linear) or Pie Chart (circular). | Progress Bar |
| Dynamic Value (0-100) | How much of the linear bar visually fills. | 59 |
| Select Icon | None, Icon, Image or Lottie alongside the bar. | Icon |

## How It Behaves

- Confirmed on the front end: with Main Style = Progress Bar, the bar's visual fill is genuinely proportional to the Dynamic Value setting (tested at 72%, the bar filled to match). This is separate from the widget's own "Number" text field, which shows its own number as text and is not tied to the Dynamic Value percentage - the two can show different figures on the same bar and that is expected, not a bug.

## Limitations

- **The Pie Chart (circular) style does not work.** See [How to Create Circle Progress Bars in Elementor](https://theplusaddons.com/docs/create-circle-progress-bars-in-elementor/) for the confirmed defect and what that means for this style.

## Related Docs

- [How to Create Circle Progress Bars in Elementor?](https://theplusaddons.com/docs/create-circle-progress-bars-in-elementor/)- [How To Add Lottie Animation In Progress Bar Elementor?](https://theplusaddons.com/docs/add-lottie-animation-in-progress-bar-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding a progress bar in Elementor?**
A: Elementor free needs to be installed and active, and the Progress Bar widget is available as a free widget inside The Plus Addons for Elementor. That means no Pro licence is required for this widget. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides the widget inside the Elementor editor, so the main setup check is simply that the addon itself is installed and activated.

**Q: Why is the progress bar not showing on my page?**
A: The most common failure point is the widget toggle. In The Plus Addons for Elementor, go to Widgets, search for Progress Bar, and turn it on. If the addon is installed but the widget stays disabled, it will not be available in Elementor. That matters because this widget is part of The Plus Addons for Elementor, so activation is separate from just having the plugin present.

**Q: Should I use the linear bar or the circle progress bar?**
A: The linear Progress Bar style is the safe choice here because it behaves as expected on the front end. The circular Pie Chart style is listed as a limitation and does not work. If you need a working progress display right now, stick with Progress Bar instead of Pie Chart. For circle-based use cases, the related doc [How to Create Circle Progress Bars in Elementor](https://theplusaddons.com/docs/create-circle-progress-bars-in-elementor/) explains the confirmed defect.

**Q: Can I add an icon, image, or Lottie animation to a progress bar?**
A: The widget supports icon, image, and Lottie alongside the bar. In Select Icon, you can choose None, Icon, Image, or Lottie depending on how much visual context you want around the progress display. That makes it useful when a plain bar feels too bare. If you want motion specifically, there is also a related guide for [How To Add Lottie Animation In Progress Bar Elementor?](https://theplusaddons.com/docs/add-lottie-animation-in-progress-bar-elementor/).

**Q: How does the Dynamic Value setting affect the progress bar?**
A: Dynamic Value controls how much of the linear bar visually fills, using a 0-100 slider. It drives the fill animation only and is not shown as text by itself. On the front end, the fill matches that percentage proportionally, so 72% really fills to 72%. A useful gotcha: this value is separate from the widget’s own Number text field, so those two can show different figures on purpose.

**Q: What happens if the number text and fill percentage do not match?**
A: That mismatch can be expected behavior in this widget. The visual fill comes from Dynamic Value, while the Number text field shows its own number as text and is not tied to that percentage. So if one says 72 and another shows a different figure, it does not automatically mean something broke. The practical takeaway is to treat Dynamic Value as the source for fill length and Number as separate display text.