ProgressBar

ProgressBar is controlled by the value property, which defines the width of the bar. By default, it works within the 0-100 range, meaning that passing value={50} will make the bar cover half of the component width.

<ProgressBar value={50} />

You can control the value boundaries with min and max properties.

<ProgressBar value={75} min={50} max={100} />

ProgressBar comes in two sizes, medium (default) and small.

• The medium size is usually used for standalone progress or score bars.
• The small progress bar can be easily embedded into groups of elements, like in media players.

<View gap={3}>
  <ProgressBar value={50} />
  <ProgressBar value={50} size="small" />
</View>

ProgressBar supports primary (default), critical, warning, positive, and media colors for use in different contexts.

<View gap={3}>
  <ProgressBar value={50} color="primary" />
  <ProgressBar value={50} color="critical" />
  <ProgressBar value={50} color="warning" />
  <ProgressBar value={50} color="positive" />
</View>

The media progress bar stays white in both light and dark modes, making it perfect for displaying progress on top of media content. For instance, you can use it for video or audio players.

<View width="300px" maxWidth="100%" overflow="hidden" borderRadius="medium">
  <Image
    src="/img/examples/image-retina.webp"
    aspectRatio={16 / 9}
    alt="Static media example"
  />
  <View position="absolute" insetTop={0} insetEnd={0}>
    <ProgressBar value={50} color="media" size="small" />
  </View>
</View>

When using ProgressBar to display the timeout value, you can pass a custom duration to it. This allows you to run the animation purely with CSS without calculating and updating the value in your React code.

function Component() {
  const { active, toggle } = useToggle();

  return (
    <View gap={3}>
      <View.Item>
        <Button onClick={toggle}>Change value</Button>
      </View.Item>
      <ProgressBar value={active ? 100 : 0} duration={5000} />
    </View>
  );
}

• Progress should be labeled either by passing the aria-labelledby attribute pointing to a text label or with the ariaLabel property.
• By default, ProgressBar uses a progressbar role. If you're using ProgressBar in a different context, like score bars, you can manually change this role by passing a role attribute with the attributes property.