Progress

<Box maxWidth="300px">
  <Progress />
</Box>

API Reference

This component inherits props from the Progress primitive and supports common margin props.

Examples

Size

Use the size prop to control the size.

<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} size="1" />
  <Progress value={50} size="2" />
  <Progress value={75} size="3" />
</Flex>

Variant

Use the variant prop to control the visual style. Currently, we recommend using only the surface and soft variant following the ScaleUI Radix design system.

<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={50} variant="surface" />
  <Progress value={75} variant="soft" />
</Flex>

Radius

Use the radius prop to assign a specific radius value.

<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} radius="none" />
  <Progress value={50} radius="small" />
  <Progress value={75} radius="full" />
</Flex>

With controlled value

Use the value prop to provide a precise indication of the task progress.

<Progress value={75} />

With custom duration

Use the duration prop to indicate an approximate duration of an indeterminate task. Once the duration times out, the progress bar will start an indeterminate animation.

<Progress duration="30s" />

When an approximate duration can be estimated, the Progress component is still useful over Spinner, which doesn’t provide any visual cues towards the progress of the task.