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 Indeterminate() {
return (
<div className="flex w-full items-center justify-center p-10">
<ProgressCircle isIndeterminate aria-label="Loading" color="accent">
<ProgressCircle.Track>
<ProgressCircle.TrackCircle />
<ProgressCircle.FillCircle />
</ProgressCircle.Track>
</ProgressCircle>
</div>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...