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).

() => {
  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.

<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.

<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.

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

Indeterminate

To show an indeterminate progress, pass the isIndeterminate prop.

<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.