CleenUI · Feedback · ProgressCircle

ProgressCircle

Radial progress indicator — the same modes as ProgressBar, sized for compact contexts.

storybook.cleenui.com · feedback-progresscircle--default
Open in new window

About ProgressCircle

ProgressCircle is the round variant of ProgressBar. Useful where horizontal space is constrained or a circular shape fits the surrounding design better — dashboards, header indicators, sidebar badges.

The percentage value (or a custom label) can render in the center of the ring. Same determinate and indeterminate modes as the linear version.

When to use it

  • Compact loading indicators in headers.
  • Storage gauges in account dashboards.
  • Inline progress in tight table cells.
  • Score or rating gauges.

Common props

Prop
Type
Description
value
number
Progress 0–100.
indeterminate
boolean
Spinning animation when progress is unknown.
size
number
Diameter in pixels.
thickness
number
Ring stroke width.
label
ReactNode
Center label (defaults to percent).
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.