ProgressBar

ProgressBar

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

Install: @helixui/core

import { ProgressBar } from '@helixui/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.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).
• Animation respects prefers-reduced-motion.

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 helixui 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