CircularProgress

The CircularProgress component is used to indicate the progress of an operation. It can be used to represent both determinate and indeterminate progress.

<CircularProgress />

Features

Determinate

A determinate progress indicator should be used when the progress can be determined. For example, when downloading a file.

() => {
  const progress = Motion.useSpring(0, { damping: 20 });
  
  React.useEffect(() => {
    const interval = setInterval(() => {
      const currentProgress = progress.get();

      if (currentProgress >= 1) {
        progress.jump(0);
        return;
      }

      progress.set(currentProgress + 0.1);
    }, 500);

    return () => clearInterval(interval);
  }, [progress]);

  return <CircularProgress progress={progress} />;

}

Size

You can adjust the size of the progress ring using the size prop.

<Row gap={600} justify="center" align="center">
  <CircularProgress size={100} />
  <CircularProgress size={200} />
  <CircularProgress size={300} />
</Row>

Thickness

You can adjust the thickness of the progress ring using the thickness prop. The thickness should be a value between 0 and 1, where would 1 completely fill the ring.

<Row gap={600} justify="center">
  <CircularProgress thickness={0.025} />
  <CircularProgress thickness={0.15} />
  <CircularProgress thickness={0.3} />
</Row>

Warning

Please note that, due to limitations in SVG stroke positioning in the browser, the thickness is applied in both the inward and outward direction, which means the stroke will overflow the element’s dimensions.

Duration

For indeterminate indicators, you can control the speed of the animation by setting the duration prop in seconds.

<Row gap={600} justify="center">
  <CircularProgress duration={1} />
  <CircularProgress duration={2} />
  <CircularProgress duration={3} />
</Row>

Anatomy

1.StackThe root Stack component.

2.TrackThe track of the progress indicator.

3.IndicatorThe progress indicator.

Reference

`CircularProgressProps`

The CircularProgress component accepts all props from the Box component.

Name	Type	Required	Description
`progress`	`MotionValue<number>`	`false`	The progress value, from 0 to 1. If not provided, the progress indicator will be indeterminate.
`duration`	`number`	`false`	The duration of the indeterminate animation in seconds. Default is `1.4`.
`thickness`	`number`	`false`	The thickness of the progress indicator. Default is `0.05`.

Tokens

Key	Default Value