---
title: "How to Create Circle Progress Bar in WordPress?"
url: https://nexterwp.com/docs/create-circle-progress-bar-in-wordpress/
date: 2024-12-24
modified: 2026-09-19
lang: en
author: "Aditya Sharma"
description: "A circle reads differently from a bar. It suits a single headline figure — a completion rate, a score, a share of something — where a row of bars would..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-Circle-Progress-Bar-in-WordPress_-1024x519.jpg
word_count: 482
---

# How to Create Circle Progress Bar in WordPress?

## Key Takeaways

- Nexter Blocks Progress Bar block creates a circle progress bar in WordPress by selecting the Pie Chart layout.
- Value (0-1) controls how much of the circle is filled, and the Display Number toggle shows or hides the Value.
- Symbol field and Symbol Position let the symbol appear before or after the progress bar, while Title and Sub Title add text.

A circle reads differently from a bar. It suits a single headline figure — a completion rate, a score, a share of something — where a row of bars would be overkill.

The Progress Bar block draws that circle with its pie layout, with one difference in how the value is entered.

*For every External Form Styler setting in one place, see the [Interactive Circle Info guide](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-progress-bar/)

## Before You Start

- **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Progress Bar, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Progress Bar** block already on the page — see the [main Progress Bar guide](https://nexterwp.com/docs/add-a-progress-bar-in-wordpress/).

## Video Tutorial

## Steps

- Select the **Progress Bar** block and set the layout to the **circle** option.

![Choosing the circle layout](https://nexterwp.com/wp-content/uploads/2024/12/progress-bar-pie-chart-new.png)

- Enter the value as a **fraction** — 0.7 for 70%.

- Set the circle's **size** and **thickness**.

- Choose the fill and track colours.

- Publish and check the figure shown in the middle.

## How It Behaves

The circle layout renders a round chart with the percentage in the centre, rather than the horizontal bar the default layout draws.

- **The value is a fraction and is rendered as a percentage.** Measured on published pages: entering `0.4` rendered **40%**, and the block's default of `0.7` rendered **70%**. This is the one thing that catches people out.- **It is the same block, in a different layout** — the title, description and styling controls are shared with the bar.- **It is noticeably taller than the bar.** Measured on the same content: the circle rendered about 269 pixels tall against the bar's 55.- Measured with Nexter Blocks Pro deactivated: this block renders identically. It is a free block.

## Limitations

- **Entering 70 instead of 0.7 will not give you 70%.** Measured: the value is multiplied by 100, so whole numbers overshoot wildly.- **Switching the number off leaves a stray percent sign** — measured on the bar layout, the symbol is printed even when the figure is hidden. Reported to the development team.- **One circle per block.** Three stats means three blocks in a row.- A circle suits one figure. For several related values a set of bars is easier to compare.

## Troubleshooting

### My circle shows a huge number

The value was entered as a whole number. Measured: the figure is a fraction multiplied by 100, so 85 becomes 8500%. Enter 0.85.

### The circle is cut off

Reduce the circle size, or give the block more room — measured, the circle layout is around 269 pixels tall by default, far taller than the bar.

### There is a % with no number

Display Number is off. Measured: the symbol is still printed. Switch the number back on.

### I want a horizontal bar instead

Switch the layout back — it is the same block. See the [main Progress Bar guide](https://nexterwp.com/docs/add-a-progress-bar-in-wordpress/).

## Related Docs

- [Add a progress bar in WordPress](https://nexterwp.com/docs/add-a-progress-bar-in-wordpress/)- [Add an interactive circle in WordPress](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/)- [Add dark mode in WordPress](https://nexterwp.com/docs/add-dark-mode-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)