A percentage in a sentence is easy to skip. The same number as a bar is read at a glance, which is why skill lists and completion meters are drawn rather than written.
The Progress Bar block draws one, with a label, a value and a choice of bar or circle.
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.
Video Tutorial
Steps
- Add the Progress Bar block to your page.
- Choose the layout — a horizontal bar or a circle.
- Set the value the bar should fill to.
- Enter the title and any supporting text.
- Style the bar’s height, colours and the number, then publish.
How It Behaves
The block renders a labelled bar whose fill and number come from the value you set.
- The value is what is displayed. Measured on published pages: the default rendered
69%and setting 42 rendered42%, alongside the title and description. - Two layouts, measured. The bar layout renders a horizontal bar about 55 pixels tall with the label beside it; the circle layout renders a round chart around 269 pixels tall.
- The circle takes its value differently — measured, it is entered as a fraction and rendered as a percentage: 0.4 rendered 40% and the default 0.7 rendered 70%. See the circle progress bar guide.
- Measured with Nexter Blocks Pro deactivated: this block renders identically. It is a free block.
Limitations
- Switching the number off leaves the percent sign behind. Measured: with Display Number off the bar rendered a bare
%with no figure in front of it. Until this is fixed, leave the number on, or clear the symbol as well. This is reported to the development team. - The value is typed, not calculated. The bar does not track anything — it shows the number you enter, so it has to be updated by hand.
- One bar per block. A list of skills means one block per skill.
- Percentages imply precision. A bar at 87% invites the question of what was measured.
Troubleshooting
There is a stray % sign with no number
That is the Display Number setting switched off. Measured: the number is hidden but the symbol is still printed. Switch the number back on, or remove the symbol too. Reported to the development team.
My circle shows the wrong percentage
The circle value is a fraction, not a percentage. Measured: 0.4 renders as 40%. Enter 0.85 for 85%, not 85.
The bar does not animate
Check you are viewing the published page rather than the editor, and that the bar is scrolled into view — the fill animates when it appears.
The bar is too thin or too thick
Set the height on the block. The bar and circle layouts have their own size controls.
