Progress

Displays the completion progress of a task.

Anatomy

Import and assemble the component:

1import { Progress } from '@raystack/apsara'
2

3{/* Direct usage — renders track automatically */}
4<Progress value={40} />
5

6{/* Composable usage */}
7<Progress value={40}>
8  <Progress.Label>Uploading...</Progress.Label>
9  <Progress.Value />
10  <Progress.Track />
11</Progress>

API Reference

Root

The main container for the progress. Renders a default track when no children are provided. Set value to null for an indeterminate state.

Prop

Type

Label

Displays a label for the progress.

Prop

Type

Value

Displays the formatted current value as a percentage.

Prop

Type

Track

Contains the indicator that visualizes the current value.

Prop

Type

Examples

Variant

The progress supports linear and circular variants.

1<Flex direction="column" gap="large" style={{ width: "300px" }}>
2  <Progress value={15}>
3    <Flex justify="between">
4      <Progress.Label>Uploading...</Progress.Label>
5      <Progress.Value />
6    </Flex>
7    <Progress.Track />
8  </Progress>
9</Flex>

Direct Usage

The simplest way to use the progress. When no children are provided, it renders the track automatically.

1<Flex direction="column" gap="large" style={{ width: "300px" }}>
2  <Progress value={40} />
3  <Progress value={70} />
4  <Progress value={100} />
5</Flex>

Customization

Customize the track for both variants. For linear, use height on the track. For circular, use width/height on the track to control the overall size and --rs-progress-track-size to control the stroke thickness.

1<Flex direction="column" gap="large" style={{ width: "300px" }}>
2  <Progress value={60}>
3    <Progress.Track style={{ height: 2 }} />
4  </Progress>
5  <Progress value={60}>
6    <Progress.Track />
7  </Progress>
8  <Progress value={60}>
9    <Progress.Track style={{ height: 8 }} />
10  </Progress>
11</Flex>

Animated

Use controlled value to animate the progress indicator.

1(function AnimatedProgress() {
2  const [value, setValue] = React.useState(0);
3

4  React.useEffect(() => {
5    const interval = setInterval(() => {
6      setValue((current) => {
7        if (current >= 100) return 0;
8        return Math.min(100, Math.round(current + Math.random() * 25));
9      });
10    }, 1000);
11    return () => clearInterval(interval);
12  }, []);
13

14  return (
15    <Flex gap="large" align="center">

With Labels

Compose with Progress.Label and Progress.Value for additional context.

1<Flex direction="column" gap="large" style={{ width: "300px" }}>
2  <Progress value={60}>
3    <Flex justify="between">
4      <Progress.Label>Uploading files...</Progress.Label>
5      <Progress.Value />
6    </Flex>
7    <Progress.Track />
8  </Progress>
9  <Progress value={85}>
10    <Flex justify="between">
11      <Progress.Label>Processing...</Progress.Label>
12      <Progress.Value />
13    </Flex>
14    <Progress.Track />
15  </Progress>

Accessibility

  • Uses the progressbar ARIA role
  • Sets aria-valuenow, aria-valuemin, and aria-valuemax attributes
  • Supports indeterminate state when value is null
  • Supports aria-label and aria-valuetext for screen readers