Stats With Progress Bars
Copy beside four goal attainment rows, each with a label, value, and filled progress bar.
Copy beside four goal attainment rows, each with a label, value, and filled progress bar.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
Stats With Progress Bars is a split stats section built on goal attainment. The left column frames the numbers with a heading and a paragraph about accountability. The right column lists four goals, each with a descriptive label, a percentage value, and a track bar filled to match. The bars give every percentage a physical length, which makes high numbers feel earned and differences between rows legible.
The goals are one array of label, display value, and width, so the section retells any set of percentages by editing data. Bars are plain divs in rounded tracks, no SVG, and the primary on muted palette holds up in both themes. Three to six rows fit comfortably before the column outgrows the copy beside it.
Reach for this block when your stats are commitments rather than totals. Percentages with visible shortfall read as honesty, which suits operational claims the way the celebratory tiles of metric-tiles-band suit scale claims. It also beats stats-with-donut-grid when labels are long, bars give a full sentence room that rings do not.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is published operational targets: onboarding, SLA, resolution, and renewal. Other bar worthy sets:
Tip: leave at least one bar visibly short of full, a wall of 99s reads as advertising while one 84 makes the rest believable.