Progress for Radix UI

The bar fills from a number your code already has. It doesn't watch the request for you.

Use it for an upload or a numbered step when people should see how much is left. If there is nothing to measure, use a Spinner. In React, Radix UI draws the bar and can leave it indeterminate when you do not know the end.

Installation

Anatomy

Progress
├── ProgressLabel
├── ProgressTrack
├── ProgressIndicator
├── ProgressValue
├── ProgressView
└── ProgressCircle
    ├── ProgressCircleTrack
    └── ProgressCircleRange

Usage

import { useEffect, useState } from "react";
import { Progress } from "@/components/ui/progress";

const ProgressDemo = () => {
  const [progress, setProgress] = useState(13);

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

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

Demos

Label

ProgressLabel names the bar, here an upload, and ProgressValue prints the percent beside it. Both sit in Progress and follow value. Use them when a bare bar on the page could be any of several tasks. The label also names the bar for assistive tech, so you can skip a separate aria-label when the visible word is the right name.

Controlled

The bar only displays value. A Slider writes that number here so you can drag and watch the fill, which is a stand-in for the real source. In the app, the number comes from the upload or from the step you are on, and the bar will not subscribe to a request. Use a controlled value whenever the task can report how far it has gotten.

Rtl

dir set to rtl puts the Arabic caption and the percent on a right-to-left row. The number is the same value. Use this to check a translated page, not as a variant you render only for one language. Set dir on Progress when this bar should follow a right-to-left parent even if you have not flipped the whole document. The bar fills from the right in right-to-left text on its own, so the rtl:rotate-180 a shadcn/ui snippet passes is dropped rather than flipping it back.

FAQ

API Reference