Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Features

Provides context for assistive technology to read the progress of a task.

Installation

Install the component from your command line.

npm install @radix-ui/react-progress

npm install @radix-ui/react-progress

Anatomy

Import the components and piece the parts together.

import * as Progress from '@radix-ui/react-progress';

export default () => (
  <Progress.Root>
    <Progress.Indicator />
  </Progress.Root>
);

import * as Progress from '@radix-ui/react-progress';
export default () => (
  <Progress.Root>
    <Progress.Indicator />
  </Progress.Root>
);

Basic example

Create your styled progress component from the primitive parts.

// import { styled } from 'path-to/stitches.config';
import * as Progress from '@radix-ui/react-progress';

const StyledProgress = styled(Progress.Root, {
  position: 'relative',
  height: 10,
  overflow: 'hidden',
  borderRadius: 5,
  background: 'gainsboro',
});

const StyledIndicator = styled(Progress.Indicator, {
  boxSizing: 'border-box',
  position: 'absolute',
  backgroundColor: 'dodgerblue',
  height: '100%',
});

export default () => (
  <StyledProgress value={50}>
    <StyledIndicator style={{ width: '50%' }} />
  </StyledProgress>
);

// import { styled } from 'path-to/stitches.config';
import * as Progress from '@radix-ui/react-progress';
const StyledProgress = styled(Progress.Root, {
  position: 'relative',
  height: 10,
  overflow: 'hidden',
  borderRadius: 5,
  background: 'gainsboro',
});
const StyledIndicator = styled(Progress.Indicator, {
  boxSizing: 'border-box',
  position: 'absolute',
  backgroundColor: 'dodgerblue',
  height: '100%',
});
export default () => (
  <StyledProgress value={50}>
    <StyledIndicator style={{ width: '50%' }} />
  </StyledProgress>
);

Accessibility

Adheres to the progressbar role requirements.

API Reference

Root

Contains all of the progress parts.

Prop	Type	Default
`as`	`enum`	`div`
`value`	`number \| null`
`max`	`number`
`getValueLabel`	`function`

Indicator

Used to show the progress visually. It also makes progress accessible to assistive technologies.