Progress

A new value eases in over 300ms. The track is the same groove as Slider, without a thumb, because a progress bar is not something you drag.

Installation

$npx shadcn@latest add @reziui/progress

The CLI also adds the progress-indeterminate keyframes and the --animate-progress-indeterminate theme variable to your global CSS.

Usage

import { Progress } from "@/components/ui/progress";

export function Example() {
  return <Progress value={64} aria-label="Upload" />;
}

Name the bar with aria-label or aria-labelledby; screen readers then read the name with the percentage. Show the number next to the label, as in the preview, when people need the exact value.

Examples

Indeterminate

Leave out value (or pass null) when the total is unknown. A 30% segment slides from end to end and back; under reduced motion it stays in the middle and its opacity pulses instead. Both directions flip in right-to-left layouts.

API reference