Beside the numbers it sums up
Without a visible label, the bar takes an aria-label; the text beside it says the same.
3 of 5 passed
import { ProgressBar } from '@arbol-ai/ui';
<div className="flex max-w-sm items-center gap-2.5">
<ProgressBar aria-label="Assessments passed" className="flex-1" maxValue={5} value={3} />
<span className="text-muted-foreground shrink-0 text-xs font-medium tabular-nums">
3 of 5 passed
</span>
</div>With a label
The value shows as a percentage, or in the app’s words with valueLabel.
Importing contacts120 of 300
Calling the waiting list65%
import { ProgressBar } from '@arbol-ai/ui';
<div className="grid max-w-sm gap-4">
<ProgressBar label="Importing contacts" maxValue={300} value={120} valueLabel="120 of 300" />
<ProgressBar label="Calling the waiting list" value={65} />
</div>Unknown share
Preparing the file
import { ProgressBar } from '@arbol-ai/ui';
<ProgressBar className="max-w-sm" isIndeterminate label="Preparing the file" />Source
The examples above are src/components/progress-bar/progress-bar.examples.tsx, which the library’s tests render too.