One big ring for the whole batch: the percentage counts up in the middle, ticks mark each file, and a check draws itself when everything is done.
"use client"
import { useUploader } from "@uploadcn/react"
import { demoAdapter, useSampleFiles } from "@/examples/_demo"
import { ProgressRingUpload } from "@/components/progress-ring-upload"
export default function ProgressRingUploadExample() {
const uploader = useUploader({ adapter: demoAdapter })
useSampleFiles(uploader)
return <ProgressRingUpload uploader={uploader} />
}
Installation
npx shadcn@latest add @uploadcn/progress-ring-uploadUsage
import { ProgressRingUpload } from "@/components/progress-ring-upload"<ProgressRingUpload />The ring and the number share one useSpring, so they never drift apart. The caption under the ring is an aria-live region with files, bytes and time left.
Props
Prop
Type