Progress Circle

Circular progress indicator with percentage label inside. Four sizes.

import{ ProgressCircle } from "@pepulux/ui"

Sizes

72%
72%
72%
72%

Values

25%
50%
100%

Props

PropTypeDefaultDescription
value*number—Progress value 0–100
size"sm" | "md" | "lg" | "xl""md"Circle diameter
strokeWidthnumber—Thickness of the progress arc
colorstring—Arc color (CSS color or var)
labelstring—Text shown below the circle
Base component → Progress indicatorswww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Compact progress

Circles and half-circles fit dashboards and cards. Keep the value readable at the centre.