Progress Circle

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.

by Hero Ui

"use client"

import { ProgressCircle } from "@/components/ui/heroui-progress-circle"

export default function Default() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <ProgressCircle aria-label="Loading" value={60} color="accent">
        <ProgressCircle.Track>
          <ProgressCircle.TrackCircle />
          <ProgressCircle.FillCircle />
        </ProgressCircle.Track>
      </ProgressCircle>
    </div>
  )
}