7onicDESIGN SYSTEM

Progress

Progress visually displays the status of a task. Provides linear bar and circular types — ideal for file uploads, step-based progress, or any determinate progress value.

2
Types
3
Sizes
2
Colors
Radix
Base

Playground

Preview
lineardefault0%
Type
Size
Color
Variant
Options
<Progress value={0} />

Sizes

sm
Track Height4px
Circular Diameter32px
default
Track Height8px
Circular Diameter48px
lg
Track Height12px
Circular Diameter64px

Features

Type

Two display types — linear bar and circular. Choose based on context.

<Progress value={60} />
<Progress type="circular" value={60} />

Striped

variant="striped"shows diagonal stripes.animatedenables a flowing animation.

<Progress value={70} variant="striped" />
<Progress value={70} variant="striped" animated />

Show Value

showValuedisplays the percentage value.formatLabelenables custom formatting.

75%
75%
75%
750/1000 MB
<Progress value={75} showValue />
<Progress type="circular" value={75} showValue />
<Progress value={750} max={1000} showValue
  formatLabel={(v, max) => `${v}/${max} MB`} />

API

Component Structure

Progress— Radix Progress

Standalone component — no sub-components.

Props

type"linear"
"linear" | "circular"

Display type — linear bar or circular

value0
number

Progress value (0 to max)

max100
number

Maximum value

size"default"
"sm" | "default" | "lg"

Size — linear: track height, circular: diameter

variant"default"
"default" | "striped"

Visual variant (linear only)

color"default"
"default" | "primary"

Indicator color — default: dark, primary: brand color

indicatorClassNameundefined
string

Custom class for the indicator (overrides color)

showValuefalse
boolean

Show percentage value

formatLabelundefined
(value: number, max: number) => string

Custom value formatter

animatedfalse
boolean

Flowing stripe animation (striped variant only)

thicknessundefined
number

Stroke width for circular (circular only)

labelundefined
string

Accessibility label

classNameundefined
string

Additional CSS class

Anatomy

Linear
Track
1
2
3
60%
Circular
1
2
3
60%
1
Track
Background track
2
Indicator
Progress bar / arc
3
Value
Percentage (optional)

Best Practices

✓

Recommended

  • ✓Use determinate mode when progress is measurable
  • ✓Show value with showValue for long-running tasks
  • ✓Use appropriate color for status (e.g. error for failure)
✕

Don't

  • ✕Don't use Progress when progress is unknown — use Spinner
  • ✕Don't display large numbers of Progress bars on one page
  • ✕Don't use Progress for post-action feedback — use Toast

Accessibility

ARIA / WCAG

  • role="progressbar" applied automatically
  • aria-valuenow / aria-valuemax
  • label prop sets a custom label