Progress

<View width="300px" maxWidth="100%">
  <Progress value={50} />
</View>

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

<Progress value={50} />

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

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

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

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

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

<View gap={3}>
  <Progress value={50} color="primary" />
  <Progress value={50} color="critical" />
  <Progress value={50} color="warning" />
  <Progress 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">
  <Scrim
    backgroundSlot={
      <Image src="/img/examples/image-retina.webp" alt="Static media example" />
    }
    position="bottom"
  >
    <Progress value={50} color="media" size="small" />
  </Scrim>
</View>

When using Progress 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 DurationExample() {
  const [active, setActive] = React.useState(false);

  const handleChange = () => {
    setActive((state) => !state);
  };

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