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