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"
import { Label } from "@heroui/react"
export default function WithLabel() {
return (
<div className="flex w-full items-center justify-center gap-3 p-10">
<ProgressCircle aria-label="Loading" value={75} color="accent">
<ProgressCircle.Track>
<ProgressCircle.TrackCircle />
<ProgressCircle.FillCircle />
</ProgressCircle.Track>
</ProgressCircle>
<Label>75% Complete</Label>
</div>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...