Progress bar

The Progress bar is a horizontal bar that fills to a percentage — use it for skill meters, funding goals, onboarding steps, loading states, and any “X of 100%” indicator. It adapts to your site’s theme colors automatically and is accessible by default (it renders with the correct role="progressbar" and ARIA value attributes).

Add a progress bar

1. Open the Components tab (puzzle-piece icon) or the Blocks search.

2. Find Progress bar under the Content category.
3. Drag it onto the canvas and drop it where you want it.

Expected result

A progress bar appears at 60% fill in your primary color. It is selected, and its options show in the Settings tab of the right sidebar.

Configure it

Select the bar and open the Settings tab. All options live there:

Every progress bar option, plus the Animation group every component carries.

Setting	What it does
Value	The fill percentage, 0–100. Values outside that range are clamped.
Color	The fill color: Primary, Secondary, Success, Warning, Danger, Info, or Neutral (grey).
Height	Bar thickness: Thin, Medium, Thick, or Thickest.
Track	The empty portion behind the fill — Subtle, Outlined, or Filled (see below).
Striped	Adds diagonal stripes to the fill.
Animated	Animates the stripes so they move. Turn on Striped as well for this to be visible.

Colors follow your site’s theme tokens, so a progress bar restyles itself when you change your theme. Neutral is a plain grey that reads clearly in both light and dark mode.

Track variants

The track is the unfilled part of the bar. Pick the one that reads best against your section background:

• Subtle — the default faint track. Best on plain backgrounds.
• Outlined — an outline in the fill color with a transparent center. Best on subtly tinted backgrounds where a faint track would disappear.
• Filled — a muted tint fills the whole track. Highest contrast.

Expected result

The bar updates live on the canvas as you change each setting.

Accessibility

The bar exposes its value to screen readers automatically — the Value you set is written to aria-valuenow, with min 0 and max 100. You don’t need to add anything. To give the bar a more specific label, select it and edit the aria-label in the Settings tab.

Common issues

The “Animated” toggle does nothing — animation only moves the stripes, so turn Striped on too.

The track is invisible on my background — switch the Track setting from Subtle to Outlined or Filled for more contrast.

The bar didn’t stop at my number — Value is clamped to 0–100. Anything higher shows as a full bar, anything lower as empty.