# The Progress Bar Block: Show How Far Along, Without Touching CSS

URL: https://pro.flexablock.com/the-progress-bar-block-show-how-far-along-without-touching-css/
Published: 2026-07-16T03:12:34+00:00
Updated: 2026-07-17T01:15:15+00:00
Author: admin

# The Progress Bar Block: Show How Far Along, Without Touching CSS

A line, ring or gauge that fills as your visitor scrolls to it — set a percentage or a real count, label it, colour it, and drop it straight into the page.

## 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.

Line, ring or half-circle gauge — same number, whichever shape fits the spot

Fills from empty as the visitor scrolls down to it

Show a percentage, or a real count like 48 / 60, with its own label

Solid or striped fill, in colours that match the section

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.

Design

90%

**The same value as a ring.** Switch the layout to a circle and the counter sits in the middle of it.

Project complete

72%

**A half-circle gauge.** The semicircle layout, for a dashboard-style read where a full ring would be too much.

Capacity

64%

**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.

Tasks done

48 / 60

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.

[Download Flexa Block](https://wordpress.org/plugins/flexa-block/)