Progress

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

<Progress value={33} />

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>)

<ProgressPrimitive.Root
  className="relative h-2 w-full overflow-hidden rounded-full bg-primary/20"
  {...props}
>
  <ProgressPrimitive.Indicator
    className="h-full w-full flex-1 bg-primary transition-all"
    style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
  />
</ProgressPrimitive.Root>

<Progress value={60} />

<div className="space-y-2">
  <div className="flex items-center justify-between">
    <span className="text-sm font-medium">Progress</span>
    <span className="text-sm text-muted-foreground">60%</span>
  </div>
  <Progress value={60} />
</div>

function ControlledProgress() {
  const [progress, setProgress] = React.useState(0)

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

  return <Progress value={progress} />
}

<div className="space-y-4">
  <Progress value={60} className="h-1" />
  <Progress value={60} className="h-2" />
  <Progress value={60} className="h-4" />
</div>

<Progress value={null} className="animate-pulse" />