Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationCase studiesBlog
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={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.

PropTypeDefault
asChild
boolean
false
value
number | null
No default value
max
number
No default value
getValueLabel
function
No default value
Data attributeValues
[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.

PropTypeDefault
asChild
boolean
false
Data attributeValues
[data-state]"complete" | "indeterminate" | "loading"
[data-value]

The current value

[data-max]

The max value

PreviousPopover
NextRadio Group
Edit this page on GitHub.