progress

Horizontal progress bar with determinate and indeterminate states. Correct role="progressbar" and ARIA attributes are set automatically.

Default

progress({ value: 25  })
progress({ value: 50  })
progress({ value: 75  })
progress({ value: 100 })

With label and value

Set showLabel and showValue to render text above the bar.

Storage used 68%

Upload complete 32%

progress({ value: 68, label: 'Storage used',    showLabel: true, showValue: true })
progress({ value: 32, label: 'Upload complete', showLabel: true, showValue: true })

Variants

progress({ value: 80, variant: 'accent'  })
progress({ value: 80, variant: 'success' })
progress({ value: 80, variant: 'warning' })
progress({ value: 80, variant: 'error'   })

Sizes

progress({ value: 60, size: 'sm' })
progress({ value: 60, size: 'md' })
progress({ value: 60, size: 'lg' })

Indeterminate

Omit value when the total duration is unknown — the bar animates continuously.

progress({ label: 'Loading…' })   // no value = indeterminate

Prop	Type	Default
`value`	number	—	Current value. Omit for indeterminate.
`max`	number	100
`label`	string	—	Sets `aria-label` and the visible label when `showLabel` is true
`showLabel`	boolean	false	Render label text above the bar
`showValue`	boolean	false	Render percentage above the bar (right-aligned)
`variant`	`accent \| success \| warning \| error`	`accent`
`size`	`sm \| md \| lg`	`md`	.25rem / .5rem / 1rem
`class`	string	—