Overview
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
- Supports indeterminate state for when progress is unknown
Installation
npm install @radix-ui/react-progress
Anatomy
import * as Progress from '@radix-ui/react-progress';
export default () => (
<Progress.Root>
<Progress.Indicator />
</Progress.Root>
)
API Reference
Contains all the parts of a progress bar.
The progress value. If null, the progress is indeterminate.
The maximum progress value.
getValueLabel
(value: number, max: number) => string
A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.
Indicator
Used to show the progress visually. It also makes progress accessible to assistive technologies.
Examples
Basic Usage
import * as Progress from '@radix-ui/react-progress';
import { useState, useEffect } from 'react';
export default () => {
const [progress, setProgress] = useState(13);
useEffect(() => {
const timer = setTimeout(() => setProgress(66), 500);
return () => clearTimeout(timer);
}, []);
return (
<Progress.Root
value={progress}
style={{
position: 'relative',
overflow: 'hidden',
background: 'lightgray',
borderRadius: 99999,
width: 300,
height: 25,
}}
>
<Progress.Indicator
style={{
backgroundColor: 'blue',
width: '100%',
height: '100%',
transition: 'transform 660ms cubic-bezier(0.65, 0, 0.35, 1)',
transform: `translateX(-${100 - (progress || 0)}%)`,
}}
/>
</Progress.Root>
);
};
Indeterminate State
import * as Progress from '@radix-ui/react-progress';
export default () => (
<Progress.Root
value={null}
style={{
position: 'relative',
overflow: 'hidden',
background: 'lightgray',
borderRadius: 99999,
width: 300,
height: 25,
}}
>
<Progress.Indicator
style={{
backgroundColor: 'blue',
width: '100%',
height: '100%',
}}
/>
</Progress.Root>
);
Custom Value Label
import * as Progress from '@radix-ui/react-progress';
export default () => (
<Progress.Root
value={75}
max={100}
getValueLabel={(value, max) => `${value} out of ${max} complete`}
>
<Progress.Indicator />
</Progress.Root>
);
Data Attributes
data-state - "complete", "loading", or "indeterminate"data-value - The current valuedata-max - The max value
Indicator
data-state - "complete", "loading", or "indeterminate"data-value - The current valuedata-max - The max value
Accessibility
Adheres to the progressbar role requirements.