components / progress
progress.
linear progress bar — square, three track heights, bare or outlined. determinate from value/max, or an indeterminate sweep for unknown durations. honors prefers-reduced-motion.
today's focus0%
sessions5 of 8
syncing—
installation
bunx @justin06lee/chrome@latest add progressprops
| name | type | default | description |
|---|---|---|---|
| value | number | 0 | current amount; ignored when indeterminate. |
| max | number | 100 | upper bound for value. |
| indeterminate | boolean | false | unknown-duration state: a sliver sweeps the track and no value is reported to assistive tech. |
| size | 'sm' | 'md' | 'lg' | 'md' | track height: 2px, 4px, 8px. |
| accent | string | '#fff' | css color for the filled bar. |
| label | ReactNode | - | caption above the track, set in the mono group-label style. |
| showValue | boolean | false | show the percentage opposite the label. |
| bordered | boolean | false | outline the track instead of tinting it. only sensible at size 'lg'. |
| valueText | string | - | custom value text, e.g. "3 of 8". overrides the percentage and sets aria-valuetext. |
| ariaLabel | string | - | |
| className | string | - |