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.

Install the component from your command line.

npm install @radix-ui/react-progress

Import the components and piece the parts together.

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

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>
);

Adheres to the progressbar role requirements.

Contains all of the progress parts.

PropTypeDefault
asenumdiv
valuenumber | nullNo default value
maxnumberNo default value
getValueLabelfunctionNo default value

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

PropTypeDefault
asenumdiv