Progress

The Progress component provides a flexible UI element for displaying progress indicators — either a measurable (determinate) bar or an ongoing (indeterminate) loading state.

Variations

Variants

The variant prop indicates the type of progress. It accepts default and indeterminate — whether the progress is measurable or ongoing without a known completion percentage.

States

The state prop reflects the current status of the operation. It accepts completed, paused, failed, processing, and default, controlling the visual feedback based on the progress state.

Colors

The color prop accepts a closed enum of palette themes — gray, blue, brown, cyan, green, forest-green, indigo, lime, mint, orange, pink, purple, red, violet, and yellow — matching the Tag theme set. The bar fill resolves to the corresponding design-system token (e.g. --cn-set-blue-primary-bg).

color and state are mutually exclusive — pass one or the other, never both. When color is set, the bar uses the chosen theme color while the status icon falls back to the neutral default; use hideIcon to remove the icon entirely. color works with both the default and indeterminate variants.

Sizes

The size prop adjusts the height of the progress bar. It accepts sm, md, and lg to fit different UI contexts.

Installation

import { Progress } from '@harnessio/ui/components'

//...

return (
  <Progress value={0.75} state="processing" />
)

Anatomy

Progress renders a bar with optional label, subtitle, description, a percentage, and a status icon.

variant — default for a measurable bar driven by value, or indeterminate for an ongoing animation with no known completion.
value — a number from 0 to 1 (clamped) shown as a percentage. Required for the default variant; not accepted when indeterminate.
state vs color — choose one. state maps to semantic feedback (processing, completed, paused, failed) with a matching icon; color sets a palette theme for the bar fill.
Text — label sits above the bar (with the percentage unless hidePercentage), and subtitle / description sit below.

<Progress
  value={0.5}
  state="processing"
  label="Analytics_Report_March.csv"
  subtitle="5 min left"
/>

Best practices

Use the default variant with a real value whenever you can estimate completion; reserve indeterminate for waits of unknown length.
Use state to communicate outcome (completed, paused, failed) rather than encoding it only in the color.
Pair a label with the percentage so people know what’s progressing.

Don’t

Don’t pass both state and color — they’re mutually exclusive.
Don’t leave a bar stuck at an indeterminate animation once you know the actual progress; switch to a determinate value.

Accessibility

Labeling

Progress renders a native HTML <progress> element, which carries built-in progress-bar semantics — no extra ARIA roles are added.
When you pass an id (or let one be generated), the label is associated with the bar via htmlFor, so the label is announced with the progress value.

Known limitations

No explicit ARIA value attributes. Value semantics come from the native element (value / max) rather than explicit aria-valuenow / aria-valuemin / aria-valuemax. In the indeterminate variant the element has no value, matching the native indeterminate state.
Icon reflects state, not color. When color is set (and state is therefore unset) the status icon falls back to the neutral default; use hideIcon if that icon isn’t meaningful.

Properties

Progress

Prop	Required	Default	Type
variant	false	'default'	'default' \| 'indeterminate'
value	false		number
state	false	'default'	'default' \| 'processing' \| 'completed' \| 'paused' \| 'failed'
color	false		'gray' \| 'blue' \| 'brown' \| 'cyan' \| 'green' \| 'forest-green' \| 'indigo' \| 'lime' \| 'mint' \| 'orange' \| 'pink' \| 'purple' \| 'red' \| 'violet' \| 'yellow'
size	false	'md'	'sm' \| 'md' \| 'lg'
label	false		string
subtitle	false		string
description	false		string
hidePercentage	false	false	boolean
hideIcon	false	false	boolean
hideContainer	false	false	boolean
id	false		string
className	false		string