Progress

npx radk add progress

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

<Progress value={60} />

<div className="space-y-4">
  <Progress value={25} />
  <Progress value={50} />
  <Progress value={75} />
  <Progress value={100} />
</div>

"use client"

import { useEffect, useState } from "react"

export function ProgressAnimated() {
  const [value, setValue] = useState(0)

  useEffect(() => {
    const timer = setInterval(() => {
      setValue((prev) => (prev >= 100 ? 0 : prev + 10))
    }, 800)
    return () => clearInterval(timer)
  }, [])

  return <Progress value={value} />
}

<div className="space-y-1.5">
  <div className="flex justify-between text-sm">
    <span>Uploading...</span>
    <span className="text-muted-foreground">60%</span>
  </div>
  <Progress value={60} />
</div>