Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
import React from 'react';
import * as Progress from '@radix-ui/react-progress';
import './styles.css';
const ProgressDemo = () => {
const [progress, setProgress] = React.useState(13);
React.useEffect(() => {
const timer = setTimeout(() => setProgress(66), 500);
return () => clearTimeout(timer);
}, []);
return (
<Progress.Root className="ProgressRoot" value={progress}>
<Progress.Indicator
className="ProgressIndicator"
style={{ transform: `translateX(-${100 - progress}%)` }}
/>
</Progress.Root>
);
};
export default ProgressDemo;
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.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
value | number | null | |
max | number | |
getValueLabel | function |
| Data Attribute | Values |
|---|---|
[data-state] | "complete" | "indeterminate" | "loading" |
[data-value] | The current value |
[data-max] | The max value |
Used to show the progress visually. It also makes progress accessible to assistive technologies.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
| Data Attribute | Values |
|---|---|
[data-state] | "complete" | "indeterminate" | "loading" |
[data-value] | The current value |
[data-max] | The max value |