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={progress}>
			<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.

Installation

Install the component from your command line.

npm install @radix-ui/react-progress

Anatomy

Import all parts and piece them together.

import * as Progress from "@radix-ui/react-progress";

export default () => (
	<Progress.Root>
		<Progress.Indicator />
	</Progress.Root>
);

Accessibility

Adheres to the progressbar role requirements.

API Reference

Root

Contains all of the progress parts.

Prop	Type	Default
`asChild`	`boolean`	`false`
`value`	`number \| null`	No default value
`max`	`number`	No default value
`getValueLabel`	`function`	No default value

Data attribute	Values
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	The current value
`[data-max]`	The max value

Indicator

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

PreviousPopover

NextRadio Group

Edit this page on GitHub.

Overview

Guides

Components

Utilities