40%
<Stack
width="440px"
maxWidth="100%"
>
<ProgressBar
value={40}
max={100}
valuePosition="end"
ariaLabel="Uploading file"
/>
</Stack>Features
- Shows completion relative to a configurable maximum.
- Can display a percentage beside or below the bar.
- Animates progress updates and respects reduced-motion preferences.
- Exposes the current value and bounds to assistive technology.
Value
Set value to the completed amount. The default maximum is 100.
0%
50%
100%
import { ProgressBar, Stack } from "@vortexlabs/vortex";
<Stack gap={4} width="100%">
<ProgressBar value={0} valuePosition="end" ariaLabel="Empty" />
<ProgressBar value={50} valuePosition="end" ariaLabel="Half" />
<ProgressBar value={100} valuePosition="end" ariaLabel="Complete" />
</Stack>Maximum
Set max to the total number of steps or items.
75%
<ProgressBar value={3} max={4} valuePosition="end" ariaLabel="Step 3 of 4" />Percentage
Use valuePosition="end" or valuePosition="bottom" to show the rounded percentage. Omit valuePosition to hide it.
40%
40%
<Stack gap={6} width="100%">
<ProgressBar value={40} ariaLabel="Uploading file" />
<ProgressBar value={40} valuePosition="end" ariaLabel="Uploading file" />
<ProgressBar value={40} valuePosition="bottom" ariaLabel="Uploading file" />
</Stack>Accessible Label
Use attributes={{ "aria-labelledby": "import-label" }} to name the bar from a visible label.
Importing records
60%
<Stack gap={2} width="100%">
<Text attributes={{ id: "import-label" }}>Importing records</Text>
<ProgressBar value={60} valuePosition="end" attributes={{ "aria-labelledby": "import-label" }} />
</Stack>Use Spinner when the amount of work remaining is unknown.
Accessibility
Description
Supply
ariaLabel or connect a visible label with attributes["aria-labelledby"].Exposes
role="progressbar", the current value, a minimum of zero, and the configured maximum.Clamps values to the valid range; non-finite values use zero, and negative or non-finite maximums use 100.
A maximum of zero shows zero progress.