Blueprint

GuidesFoundationComponentsReleases
⌘K

Progress

Progress is used to display the progress status for a task that takes a long time or consists of several steps.

React


import { Progress } from '@hover/blueprint';

Value

Pass a value and optionally pass a max value (max defaults to 100).

live

() => {
const [value, setValue] = useState(3);
return (
<Stack direction="row" spacing="300">
<Progress value={value} max={10} flex={2} />
<Slider colorScheme="neutral" value={value} onChange={setValue} max={10} flex={1} />
</Stack>
);
};

Size

There are two ways you can increase the height of the progress bar:

  • You can add size prop to increase the height of the progress bar.
  • You can also use the height prop to manually set a height.
live

<Stack spacing="300">
<Progress size="small" value={20} />
<Progress size="medium" value={20} />
<Progress size="large" value={20} />
<Progress height="400" value={20} />
</Stack>

Color

You can add colorScheme prop to any progress bar to apply system color scheme.

live

<Stack spacing="300">
<Progress value={20} size="medium" colorScheme="success" />
<Progress value={20} size="medium" colorScheme="brandTan" />
<Progress value={20} size="medium" colorScheme="neutral" />
</Stack>

Animated

To show an animated progress, pass the isAnimated prop.

live

<Progress size="medium" value={33} isAnimated />

Indeterminate

To show an indeterminate progress, pass the isIndeterminate prop.

live

<Progress size="medium" isIndeterminate />

Accessibility

  • Progress has a role set to progressbar to denote that it is a progress.
  • Progress has aria-valuenow set to the percentage completion value passed to the component, to ensure the progress percent is visible to screen readers.