Progress

Progress indicators for showing completion status of tasks or processes.

Linear Progress

Linear progress bars are ideal for showing progress through a process or task completion.

Sizes

sm, md (the default), and lg.

Small

Medium

Large

Values

Prompts analyzed

128 of 500

Pages crawled

1,820 of 2,800

Citations classified

640 of 640

Indeterminate

Set indeterminate instead of value when progress is unknown. A short segment slides across the track.

Generating visibility report…

Custom colors

fill takes a background class such as bg-fill-blue.

Credits used

Page test progress

Circular Progress

Circular progress indicators are perfect for compact spaces and showing percentage completion.

Sizes

sm, md (the default), and lg.

Small

Medium

Large

Values

25%

65%

100%

Custom colors

trackColor and progressColor take a CSS color. Use theme variables such as var(--color-fill-blue) so the colors follow light and dark mode.

Blue

Amber

Green

Usage

Both components clamp the value to 0–100. LinearProgress is always exposed as a progress bar and is named "Progress" unless you pass label. CircularProgress is hidden from assistive technology unless you pass label.

LinearProgress

valueRequired
number

Progress value from 0 to 100. Required unless indeterminate is set

indeterminate
boolean

Shows an animated bar instead of a value. Cannot be combined with value

Default: false

size
'sm''md''lg'

Height of the bar

Default: md

fill
string

Fill color class for the bar

Default: bg-fill-primary

label
string

Accessible name for the progress bar

Default: Progress

className
string

Additional CSS classes for the outer wrapper


CircularProgress

progress
number

Progress value from 0 to 100

Default: 0

size
'sm''md''lg'number

Named size variant (14, 20 or 60px) or an explicit pixel size

Default: md

label
string

Accessible name. When set, the indicator is exposed as a progress bar

strokeWidth
number

Width of the stroke. Defaults to the size variant's stroke, or a tenth of a numeric size

strokeLinecap
'butt''round'

Shape of the arc ends. Defaults to butt for sm and round otherwise

trackColor
string

Color of the background track

Default: var(--color-fill-tertiary)

progressColor
string

Color of the progress arc

Default: var(--color-fill-primary)

bgClassName
string

Class applied to the background track

fgClassName
string

Class applied to the progress arc