> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/radix-ui/primitives/llms.txt
> Use this file to discover all available pages before exploring further.

# Progress

> Displays an indicator showing the completion progress of a task.

## 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

```bash theme={null}
npm install @radix-ui/react-progress
```

## Anatomy

```tsx theme={null}
import * as Progress from '@radix-ui/react-progress';

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

## API Reference

### Root

Contains all the parts of a progress bar.

<ParamField path="value" type="number | null">
  The progress value. If `null`, the progress is indeterminate.
</ParamField>

<ParamField path="max" type="number" default="100">
  The maximum progress value.
</ParamField>

<ParamField path="getValueLabel" type="(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.
</ParamField>

### Indicator

Used to show the progress visually. It also makes progress accessible to assistive technologies.

## Examples

### Basic Usage

<CodeGroup>
  ```tsx Basic theme={null}
  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>
    );
  };
  ```
</CodeGroup>

### Indeterminate State

<CodeGroup>
  ```tsx Indeterminate theme={null}
  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>
  );
  ```
</CodeGroup>

### Custom Value Label

<CodeGroup>
  ```tsx Custom Label theme={null}
  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>
  );
  ```
</CodeGroup>

## Data Attributes

### Root

* `data-state` - `"complete"`, `"loading"`, or `"indeterminate"`
* `data-value` - The current value
* `data-max` - The max value

### Indicator

* `data-state` - `"complete"`, `"loading"`, or `"indeterminate"`
* `data-value` - The current value
* `data-max` - The max value

## Accessibility

Adheres to the `progressbar` role requirements.