---
title: "How to Create Circle Progress Bars in Elementor?"
url: https://theplusaddons.com/docs/create-circle-progress-bars-in-elementor/
date: 2024-03-29
modified: 2026-08-11
lang: en
author: "Aditya Sharma"
description: "A Circle Progress Bar is a great way to display data and statistics in an interactive and visually appealing manner. Use it to show important stats and goals, like recent..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Create-Circle-Progress-Bars-in-Elementor_-1024x536.jpg
word_count: 371
---

# How to Create Circle Progress Bars in Elementor?

## 

- The Plus Addons for Elementor Progress Bar widget crea un círculo tipo Pie Chart en la pestaña Layout, y la sección Style permite ajustar el estilo visual y los extremos con Round Style.
- El campo Number muestra un valor numérico dentro del progreso, mientras Prefix/Postfix Symbol añade un símbolo antes o después del número para metas, puntuaciones objetivo o tasas de finalización.
- Dynamic Value usa un rango de 0 a 1 para controlar el relleno del círculo, y 0.75 representa 75% de completion.

A Circle Progress Bar is a great way to display data and statistics in an interactive and visually appealing manner. Use it to show important stats and goals, like recent achievements or future targets. It is an effective way to engage visitors and share key information visually.

With the Progress Bar widget from The Plus Addons for Elementor, you can create a circle progress bar in Elementor.

To check the complete feature overview documentation of The Plus Addons for Elementor Progress Bar widget, [click here.](https://theplusaddons.com/docs/progress-bar-settings-overview/)

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

**Best Used For:**

- SaaS websites showing feature adoption or skill completion stats at a glance

- Agency portfolios highlighting team expertise or project success rates

- Marketing pages that display campaign goal progress in a visual format

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

To do this, add the Progress Bar widget to the page and follow the steps:

1. From the **Main Style** dropdown, select **Pie Chart** under the **Layout** tab. This sets the progress bar to a circular chart format.

From the **Style** section, select the visual style for the circle progress bar.

From the **Round Style** section, select the shape of the progress bar's endpoints.

2. In the **Content** tab, enter a **Title** and **Sub Title** for the progress bar.

In the **Number** field, enter the numeric value you want to display inside the progress bar. Use this when showing percentage goals, target scores, or completion rates.

In the **Prefix/Postfix Symbol** field, add a symbol that appears alongside the number.

From the **Position** dropdown, choose whether the symbol appears before or after the number.

![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-ProgressBar-Main-Style-Pie-Chart.gif)

3. In the **Style** tab, adjust the **Dynamic Value (0-1)** to control how much of the progress bar circle is filled. Enter a value between 0 and 1, where 0 is empty and 1 is completely full. Use 0.75, for example, to show 75% completion.

Your circle progress bar is now set up and ready to display on the page.

If you want to display growing numbers alongside progress indicators, see [How to Add an Animated Number Counter in Elementor](https://theplusaddons.com/docs/animated-number-counter-for-elementor/).

![Circle Progress Bars Demo](https://theplusaddons.com/wp-content/uploads/2024/03/Circle-Progress-Bars-Demo.gif)

***Suggested Read:** [How To Add Lottie Animation In Progress Bar Elementor.](https://theplusaddons.com/docs/add-lottie-animation-in-progress-bar-elementor/)*