Radix homepage
Components

Progress

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={66}>
<Progress.Indicator className="ProgressIndicator" style={{ transform: `translateX(-${100 - progress}%)` }} />
</Progress.Root>
);
};
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
Data AttributeValues
[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.

PropTypeDefault
asChildbooleanfalse
Data AttributeValues
[data-state]"complete" | "indeterminate" | "loading"
[data-value]The current value
[data-max]The max value