Radix homepageRadix Homepage
PrimitivesBeta

Progress

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

import React from 'react';
import { styled } from '@stitches/react';
import { blackA } from '@radix-ui/colors';
import * as ProgressPrimitive from '@radix-ui/react-progress';
const StyledProgress = styled(ProgressPrimitive.Root, {
position: 'relative',
overflow: 'hidden',
background: blackA.blackA9,
borderRadius: '99999px',
width: 300,
height: 25,
});
const StyledIndicator = styled(ProgressPrimitive.Indicator, {
backgroundColor: 'white',
height: '100%',
transition: 'width 660ms cubic-bezier(0.65, 0, 0.35, 1)',
});
// Exports
export const Progress = StyledProgress;
export const ProgressIndicator = StyledIndicator;
// Your app...
const ProgressDemo = () => {
const [progress, setProgress] = React.useState(13);
React.useEffect(() => setTimeout(() => setProgress(66), 500), []);
return (
<Progress value={66}>
<ProgressIndicator style={{ width: `${progress}%` }} />
</Progress>
);
};
export default ProgressDemo;

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 all parts and piece them together.

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

Adheres to the progressbar role requirements.

Contains all of the progress parts.

PropTypeDefault
asChildbooleanfalse
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
asChildbooleanfalse