Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Demo

65% complete

Usage

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

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

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

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

API Reference

Progress

A progress bar component that shows completion percentage.

valuenumber (0-100)

classNamestring

HUD · Page · Tree

root/docs/primitives/progress

All systems operational

HUD · Page · Tree

root/docs/primitives/progress