Components
A HeroUI circular progress indicator for showing task completion in a compact ring — loading states, uploads, dashboards. Built on react-aria with an accessible label. Supports accent/success/warning/danger colors, sm/md/lg sizes, an indeterminate spinning state, and an optional adjacent label.
Loading preview...
"use client"
import { ProgressCircle } from "@/components/ui/heroui-progress-circle"
export default function Sizes() {
return (
<div className="flex w-full items-center justify-center gap-6 p-10">
<ProgressCircle aria-label="Loading" size="sm" value={40} color="accent">
<ProgressCircle.Track>
<ProgressCircle.TrackCircle />
<ProgressCircle.FillCircle />
</ProgressCircle.Track>
</ProgressCircle>
<ProgressCircle aria-label="Loading" size="md" value={60} color="accent">
<ProgressCircle.Track>
<ProgressCircle.TrackCircle />
<ProgressCircle.FillCircle />
</ProgressCircle.Track>
</ProgressCircle>
<ProgressCircle aria-label="Loading" size="lg" value={80} color="accent">
<ProgressCircle.Track>
<ProgressCircle.TrackCircle />
<ProgressCircle.FillCircle />
</ProgressCircle.Track>
</ProgressCircle>
</div>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...