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.
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.
Video Tutorial
Steps
- Select the Progress Bar block and set the layout to the circle option.
- 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.4rendered 40%, and the block’s default of0.7rendered 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.
