Progress

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

Progress is controlled by the value property, which will define the width of the bar. By default, it works within the 0-100 boundaries, which means that passing value={50} will make the bar cover half of the component width.

<Progress value={50} />

You can control these min and max boundaries in case you're working with value data sets that, for example, don't start at 0.

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

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

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

Progress supports primary (default), critical, positive, and white colors to be used in different contexts.

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

white progress bar stays white in both light and dark mode and is perfect for displaying progress on top of media content. For instance, you can use it for the video or audio player.

<View width="300px" maxWidth="100%" overflow="hidden" borderRadius="medium">
  <Overlay
    backgroundSlot={
      <Image src="/img/examples/image-retina.webp" alt="Static media example" />
    }
    position="bottom"
  >
    <Progress value={50} color="white" size="small" />
  </Overlay>
</View>

When using Progres to display the timeout value, you can pass custom duration to it. That will help you run the animation purely with CSS and 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>
  );
}