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.

Portal

Radio

Design System

Settings

Progress

React

Value

Size

Color mode

Animated

Indeterminate

Accessibility