ProgressBar

ProgressBar

Category: Feedback

<ProgressBar value={62} label="Used storage" showValue />
<ProgressBar value={92} tone="warning" label="Quota" showValue />
<ProgressBar tone="brand" size="sm" /> {/* indeterminate */}

Install: @helix-ui/core

import { ProgressBar } from '@helix-ui/core';

status: stable · since: 0.2.0

Tags: progress, loading, determinate, indeterminate

Live playground

Open the full editor or source on GitHub.

Anatomy

[████████████░░░░░░░░░░]  62%   ← determinate
[shimmer ░░░░░░░░░░░░░░░]       ← indeterminate (looping)

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — ~6-8px tall, fills width
• stackable — true
• fullBleed — false

Visual

A thin horizontal bar with a brand-tinted track. Determinate fills the track to value; indeterminate animates a moving highlight across.

Props

Name	Type	Default	Description
value	number	—	Current value. Omit for indeterminate.
max	number	100	Max value.
tone	'brand' | 'success' | 'warning' | 'danger' | 'neutral'	brand	Fill color.
size	'sm' | 'md' | 'lg'	md	Track height — 4 / 8 / 12 px.
label	ReactNode	—	Inline label above the bar.
showValue	boolean	false	Render the percentage on the right of the label row.

Tokens used

color.bg.action.neutral.default, color.bg.action.brand.default, color.bg.action.success.default, color.bg.action.warning.default, color.bg.action.danger.default, color.brand.200, color.brand.900, color.text.primary, color.text.secondary, radius.full, space.2, font.family.sans, font.size.sm, font.weight.medium

Accessibility

Role: progressbar

Notes

• When value is provided the element receives aria-valuenow/min/max. Omit value for indeterminate (no aria-valuenow).
• Provide label, aria-label, or aria-labelledby; string label is used as the progressbar accessible name.
• Animation respects prefers-reduced-motion, and the translucent channel respects prefers-reduced-transparency.
• The head of the fill is a shaded face, which is what gives the filled/unfilled boundary 3:1 (WCAG 1.4.11) for every tone. warning cannot reach it on fill colour alone.

Composes with

Component	Relation	Note
Spinner	alternative	Spinner for tiny inline loading; ProgressBar for measured/long.
Skeleton	alternative	Skeleton when the layout itself should look loading.

Prompt examples

These are the AI prompt → JSX mappings used by the helix-ui prompt DSL and integrations like Cursor / Claude Code.

upload progress

“progress bar at 62%“

<ProgressBar value={0.62} />

unknown duration

“looping indeterminate bar”

<ProgressBar />

Related

• Spinner