Add progress bars to WordPress

Labeled bars or rings that show how far along something is, from skills to a fundraising total or project steps. They fill as they rise up the screen.

Get Grinner free

See it live

Type

A Grinner block

Find it

Press + and search “Progress Bar”

Phones

It fits its own width, and big ring captions move underneath

Speed

Scroll-linked filling uses styles alone

Live demo

Nearly there.

This is the real Progress Bar block, running on this page.

$18.4k

Raised for the garden

Volunteers signed up: 42 of 60
Seed packets sent: 128 of 150
Beds planted: 9 of 12

A pretend appeal, made up to show the block.

Settings Preset Rings and Thick bars Draw-in Scroll-linked Currency symbol $

What you can change

The settings worth knowing.

A preset, a format for each bar, and how they fill.

Sketching, 90%
Typing, 75%
Tea making, 100%

Preset

Bars, steps or rings

Thin labelled bars, thick bars with the value inside, segments and steps, or one big ring with small ones beside it.

Format

Five formats

Count, Money, Rating, Steps or Percentage, so a bar can read 42 of 60, $18,400 of $25,000, 4.5 / 5 or 92%.

Draw-in

How they fill

Scroll-linked fills and empties with the scroll, Once in view fills once, and Off simply shows the values.

Progress Bar currency, a bar reading $18,400 of $25,000

Currency symbol

Your currency

$ unless you change it. Set £, € or any symbol, before or after the number.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Add Progress Bar

Press + and search for Progress Bar, pick a preset, then add a label and value for each bar.

3

Set the format

Choose a format, how the bars fill and a fill color, then publish.

Good to know

Fair questions.

A set of labeled bars or rings that show how far along something is, such as a skill, a budget or a fundraising total. Each one fills as it rises up the screen.

Scroll-linked filling and Off are styles only. Once in view adds a tiny script. Browsers without scroll animation simply show the final values.

The block fits its own width, not the screen, so step names get smaller and the big ring’s caption moves under it.

Screen readers hear each label and value as text. With reduced motion on, every bar shows its final value straight away.

No. Bars and rings only, up to 12 in one block, with the numbers you type in.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

Studio-quality design
Built for speed
Pay once, no subscription

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All blocks features