Progress
A progress bar for uploads, exports and setup steps, with a label, a formatted value and an indeterminate mode.
Usage
import {
Progress,
ProgressLabel,
ProgressValue,
} from '@vitnode/core/components/ui/progress'<Progress value={42}>
<ProgressLabel>Uploading photos</ProgressLabel>
<ProgressValue />
</Progress>ProgressLabel names the bar for screen readers. ProgressValue uses tabular
numbers, so digits don't wiggle as they count.
The bar grows with a scaleX transform, so frequent updates stay smooth. With
reduced motion it jumps straight to the new value.
Indeterminate
Don't know how long it takes? Pass value={null}. A segment sweeps across in
the reading direction. With reduced motion the track shows a static tint
instead.
<Progress value={null}>
<ProgressLabel>Preparing export</ProgressLabel>
</Progress>Custom range and format
Set min and max for any range. format takes Intl.NumberFormat options,
and ProgressValue takes a function for full control. Use
getAriaValueText when the spoken value needs more context.
<Progress max={10} value={7}>
<ProgressLabel>Onboarding steps</ProgressLabel>
<ProgressValue>{(_, value) => `${value} of 10`}</ProgressValue>
</Progress>Props
Progress
Prop
Type
ProgressValue
Prop
Type