Progress

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

Import

import { Progress } from '@sajari-ui/core';

Usage

<Progress value={6} max={10} label="Processed 6 of 10 records" />

Indeterminate

If it isn't known if/when a process will complete, an indeterminate progress can be used as featured in macOS Big Sur.

<Progress indeterminate label="Loading" />

Transitioning

The width of the bar will transition automatically.

function Example() {
  const [value, setValue] = React.useState(0);
  const handleIncrease = () => setValue(value + 1);
  return (
    <Flex space="space-x-2" alignItems="items-center">
      <Progress value={value} label="Loading" max={10} />
      <IconButton icon="arrow-right" label="Increase" size="sm" onClick={handleIncrease} disabled={value === 10} />
    </Flex>
  );
}

Accessibility

• Progress has a role set to progressbar to denote that it's a progress bar.
• Progress sets aria-valuenow to the value prop passed to the component, to ensure the progress value is visible to screen readers.
• Progress sets aria-valuemin to 0.
• Progress sets aria-valuemax to the max prop vale.