That skill bar shouldn’t need a stylesheet
You’re building an about page or a service breakdown, and you want to show a few levels — design 90%, development 75%, a project that’s 60% done. Left as plain text they’re just numbers in a sentence, and nobody slows down for them. Hand-code a bar instead and you’re back in the stylesheet, nudging widths and corner radii until it lines up — then it shifts the moment the layout changes.
The Progress Bar block turns any figure into something that reads as progress — and you set the whole thing from the sidebar, not a CSS file.
Setting one up takes about a minute. Drop the block in, type the value and a label, choose line or ring, and the preview fills in as you go. No stylesheet, no shortcode — and it animates on its own when the page loads.
See it fill, right here
Each bar below is a live Progress Bar block on this page — the same block, different settings. Scroll each one into view and it fills.
A line bar, filling on scroll. A single value shown as a percentage, climbing up from zero as it comes into view.
The same value as a ring. Switch the layout to a circle and the counter sits in the middle of it.
A half-circle gauge. The semicircle layout, for a dashboard-style read where a full ring would be too much.
A striped fill, counting to a real number. Switch from a percentage to an absolute count and the readout shows 48 / 60 instead of a percent.
It’s the same block every time — you’re only changing a couple of settings in the sidebar. Pick the shape, type the number, choose the colours, and it fits whatever section it lands in.
Ready to show your progress?
The Progress Bar block ships with Flexa Block. Install the plugin and it’s waiting in the editor the next time you open a page — right alongside the live bars you just scrolled past.
