Progress

Displays an indicator showing the completion progress of a task.

Installation

npm i @radix-ui/react-progress

Usage

import * as React from "react"
import { Progress } from "@/components/ui/progress"

export function ProgressDemo() {
  const [progress, setProgress] = React.useState(13)

  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(66), 500)
    return () => clearTimeout(timer)
  }, [])

  return <Progress value={progress} className="w-[60%]" />
}

Examples

Custom Colors

Default

Blue

Red

Green

Different Sizes

Small (h-2)

Default (h-4)

Large (h-6)

Extra Large (h-8)

Indeterminate

Loading State

Props

Name	Type	Description
value	number	The value of the progress indicator (0-100). Omit to make the progress indeterminate.
className	string	Additional CSS classes for the root element.
indicatorClassName	string	Additional CSS classes for the indicator element.
max	number	The maximum value for the progress indicator (defaults to 100).
...rest	ProgressPrimitive.ProgressProps	Other props passed to the Radix UI Progress component.

Accessibility

The Progress component adheres to the WAI-ARIA meter pattern.

Key	Description
role	Automatically set to `progressbar`
aria-valuemin	Set to 0
aria-valuemax	Set to the max value (default 100)
aria-valuenow	Set to the current value (or removed when indeterminate)
aria-valuetext	Optional text representation of the value

Documentation