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 Colors() {
return (
<div className="flex w-full items-center justify-center gap-6 p-10">
<ProgressCircle aria-label="Accent" color="accent" value={60}>
<ProgressCircle.Track>
<ProgressCircle.TrackCircle />
<ProgressCircle.FillCircle />
</ProgressCircle.Track>
</ProgressCircle>
<ProgressCircle aria-label="Success" color="success" value={100}>
<ProgressCircle.Track>
<ProgressCircle.TrackCircle />
<ProgressCircle.FillCircle />
</ProgressCircle.Track>
</ProgressCircle>
<ProgressCircle aria-label="Warning" color="warning" value={45}>
<ProgressCircle.Track>
<ProgressCircle.TrackCircle />
<ProgressCircle.FillCircle />
</ProgressCircle.Track>
</ProgressCircle>
<ProgressCircle aria-label="Danger" color="danger" value={25}>
<ProgressCircle.Track>
<ProgressCircle.TrackCircle />
<ProgressCircle.FillCircle />
</ProgressCircle.Track>
</ProgressCircle>
</div>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...