Feedback

Progress

A progress bar built on the native <progress> element.

stableNo JS requiredBuilt on <progress>hydrateless/progress.css

A determinate or indeterminate progress bar built on the native <progress> element. The browser handles the accessible value announcement. CSS-only.

Playground

Live

Value

60

IntentprimarysuccesswarningdangerinfoIndeterminate

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
value	number	—	Current value; omit for an indeterminate bar.
intent	'primary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Fill color.
size	'sm' | 'md' | 'lg'	'md'	Bar thickness.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-primary	Fill color.
--hl-surface	Track color.
--hl-radius-full	Bar corner radius.

Accessibility

• A native <progress> exposes its value, so screen readers announce completion automatically.
• Omitting value yields an indeterminate bar for unknown-length work.

Related

SpinnerA loading indicator that inherits currentColor.SliderA range slider on a native input[type=range].SkeletonA placeholder shown while content loads.