--- 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-27 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: 481 --- # How to Create Circle Progress Bar in WordPress? ## Key Takeaways - Progress Bar block renders a circle layout with the percentage in the centre, and it takes the value as a fraction, so 0.4 shows 40% and the default 0.7 shows 70%. - Nexter Blocks free edition includes the Progress Bar block, and the circle layout works identically with Nexter Blocks Pro deactivated. - One circle per block means three stats need three blocks in a row, and the circle layout is about 269 pixels tall by default, far taller than the bar's 55. 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 Nexter Blocks 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. ![Nexter Blocks editor, Progress Bar block, Style tab with the Pie Chart panel: Circle Size, Thickness, Draw Reverse and colours](https://nexterwp.com/wp-content/uploads/2026/09/progress-bar-panel-pie-chart.webp) - 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/) ## Frequently Asked Questions **Q: What do I need before creating a circle progress bar in WordPress?** A: The setup is simple: the Progress Bar block must already be on the page, and the block has to be enabled under Nexter > Blocks in your WordPress dashboard. This tutorial uses the free block, so it works in Nexter Blocks free and with Nexter Blocks Pro. The key detail is that the circle is just a different layout of the same block, so you are not starting from scratch. For the full block reference, the [Interactive Circle Info guide](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/) collects the settings in one place. **Q: How do I make a progress bar show as a circle instead of a horizontal bar?** A: The circle comes from switching the Progress Bar block to its circle layout. That changes the same block from a horizontal bar into a round chart with the percentage in the center. The important part is that title, description, and styling controls stay shared with the bar, so you are changing presentation, not rebuilding content. If you want to compare both layouts, the [main Progress Bar guide](https://nexterwp.com/docs/add-a-progress-bar-in-wordpress/) covers the base block. **Q: Why does my circle progress bar show 8500% or another huge number?** A: That happens when the value is entered as a whole number instead of a fraction. In this block, 85 becomes 8500% because the figure is multiplied by 100. The fix is to enter decimal values like 0.85 for 85% or 0.7 for 70%. This catches people out because the circle looks like it wants a percentage, but it actually expects a fraction. **Q: Why is my circle progress bar cut off on the page?** A: The circle layout is much taller than the horizontal bar, measured at about 269 pixels tall compared with 55 for the bar on the same content. If it gets clipped, reduce the circle size or give the block more room in the layout. That height difference matters because tight containers can hide part of the ring even when the settings are correct. **Q: Can I use one circle progress bar for several stats?** A: A single circle works best for one figure only. The page calls out that one circle equals one block, so three stats means three blocks in a row. That makes sense because a circle suits a headline number like a completion rate or score, while several related values are easier to compare as bars. For multiple values, bars are usually clearer than repeating circles. **Q: Should I use a circle progress bar or a horizontal bar?** A: Use the circle when you want one headline figure to stand out, like a completion rate or score. Use bars when you need to compare several related values side by side. The page also notes that both layouts are really the same block, so switching back to horizontal is just changing layout rather than replacing anything. If you want more context on related layouts, see [Add a progress bar in WordPress](https://nexterwp.com/docs/add-a-progress-bar-in-wordpress/) and [Add an interactive circle in WordPress](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/).