Progress bar

A coloured bar that shows how far along something is, optionally draggable by readers who can edit the page.

Use this when a number needs to be felt rather than read - sprint completion, budget burned, seats filled, fundraising against a target. It is not limited to percentages: you set your own Minimum and Maximum, so a bar can run 0–40 story points or 0–5000 in currency and still fill correctly. The optional Label and Unit show directly on the bar ("Completion 65%", "Raised 3200 GBP"), so the bar carries its own caption and needs no surrounding sentence. Its most useful trick is "Allow changing from the page": with that on, anyone who can edit the page can drag the bar in the published view and save, without opening the editor - which turns a status page into something a team actually keeps current.

#See it

Every example below is a real macro on this page, not a screenshot, and each one is a configuration taken from a page somebody actually built. Open this page in the editor to see how any of them is set up.

#Center, 80%

80%

#Left, 100%

100%

#Left, 65%

65%

#Left, 33%

33%

#Settings

Setting	Values	What it changes
Value	Any number. The bar never fills past Minimum or Maximum. The slider in the panel runs from Minimum to Maximum in steps of Step.	Where the bar fills to. It is a value on your own scale, not a percentage, and the bar works out how full to be from your Minimum and Maximum.
Allow changing from the page	On / Off	When on, anyone who can edit the page can click the bar in the published view to get a drag handle with Save and Cancel. Saving updates the bar for everyone. When off, and for readers without edit permission, the bar is display only.
Label	Free text	Shown on the bar before the value, for example "Completion 65%".
Unit	Free text	Shown after the value. "%" sits right against the number ("65%"), and any other unit gets a space ("3200 GBP"). Leave it empty to show just the number.
Minimum	Any number	The bottom of your scale. Change it and Value moves back inside the new range.
Maximum	Any number	The top of your scale. If Maximum is not greater than Minimum, the panel shows "Maximum must be greater than minimum." and the bar shows empty.
Step	Number, minimum 0.01	How far the panel slider and the on-page drag handle move with each nudge.
Bar width (px)	50–3000, or empty	Sets a fixed width for the bar, in pixels. Leave it empty and the bar stretches to fill the column.
Alignment	Left / Center / Right	Where a fixed-width bar sits in the column. Has no visible effect on a full-width bar.
Height	5–50 px	How thick the bar is. The label text scales with it, at half the bar height and never smaller than 10 px.
Fill	Brand palette colour or custom colour	The colour of the filled portion. If your site has a brand palette, a newly inserted bar takes this colour from the brand's primary background colour.
Track	Brand palette colour or custom colour	The colour of the unfilled remainder.
Label text	Brand palette colour, custom colour, or cleared	Colour of the text shown on the bar. Leave it empty and the macro picks black or white automatically, whichever reads best against the Fill colour.
Corner radius	0–50 px	Rounds the bar's corners. At high values on a tall bar you get a pill.
Shadow	None / S / M / L	Drop shadow behind the whole bar.

Progress tracker

A horizontal row of numbered, optionally linked steps showing where a process has got to.

Countdown

A live timer counting down to — or up from — a date and time, in one of four visual styles.

Progress, status and feedback

The rest of this family.

These carry state. Keep them true.