Design System

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 '@hoverinc/design-system-react-web';

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 mode

By default, Progress uses the color mode context to determine whether to display a dark or light placeholder animation. Pass colorMode to manually force a color mode.

live

<Stack spacing="300">
<Stack padding="500" background="neutral.0">
<Progress colorMode="light" value={50} />
</Stack>
<Stack padding="500" background="neutral.875">
<Progress colorMode="dark" value={50} />
</Stack>
</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.

Copyright © 2025 Hover Inc. All Rights Reserved.