Progress

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

Props

Prop	Type	Default	Description
`value`	`number`	`0`	The progress value (0-100)
`max`	`number`	`100`	The maximum value
`className`	`string`	-	Additional CSS classes
...progress props	`ComponentProps<typeof ProgressPrimitive.Root>`	-	All Radix Progress props are supported

Basic Usage

50%

100%

<div className="w-60 space-y-6">
  <div className="flex flex-col gap-1 items-end">
    <span className="text-uk-md text-text-secondary">0%</span>
    <Progress value={0} />
  </div>
  <div className="flex flex-col gap-1 items-end">
    <span className="text-uk-md text-text-secondary">50%</span>
    <Progress value={50} />
  </div>
  <div className="flex flex-col gap-1 items-end">
    <span className="text-uk-md text-text-secondary">100%</span>
    <Progress value={100} />
  </div>
</div>

Animated Progress

Animated Progress0%

function AnimatedProgress() {
  const [progress, setProgress] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) return 0;
        return prev + 10;
      });
    }, 500);
    
    return () => clearInterval(timer);
  }, []);
  
  return (
    <div className="w-60 space-y-4">
      <div className="flex justify-between">
        <span className="text-sm font-medium">Animated Progress</span>
        <span className="text-sm text-muted-foreground">{progress}%</span>
      </div>
      <Progress value={progress} />
    </div>
  );
}