🌏 Translated with the assistance of DeepSeek and ChatGPT

CircleProgress

I feel like this pixel‑style circular progress bar is really hard to draw.

Basic Usage

Set the progress of CircleProgress with the percentage prop (0 - 100). Values outside this range are automatically clamped between 0 and 100.

50%

Hide source code

Themes

CircleProgress offers various themes: 'primary' (default), 'sakura', 'success', 'warning', 'danger' and 'notice'.

20%

35%

50%

65%

80%

100%

Hide source code

Sizes

Control the size of CircleProgress with the size prop (px). The default is 128.

30%

50%

70%

100%

Hide source code

Stroke Width

The strokeWidth prop controls the thickness of the ring of CircleProgress. The default is 12.

60%

60%

60%

60%

Hide source code

Custom Color

Pass a custom color string to CircleProgress to generate a palette used by the ring. The supported color formats are detailed in Supported Color Parsing. Use trackColor to override the track background color.

35%

65%

100%

Hide source code

Text & Custom Content

The percentage text is shown in the center of CircleProgress by default. Set showText to false to hide it, or use the default slot to render custom content. The slot exposes a percentage parameter.

60%

Hide source code

API

CircleProgressProps

Attribute	Type	Optional	Default	Description	Version
percentage	number	True	0	The completion progress (0-100) of CircleProgress, clamped automatically when out of range.	0.2.0
theme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'notice'	True	'primary'	The theme of CircleProgress.	0.2.0
size	number	True	128	The size of CircleProgress.	0.2.0
strokeWidth	number	True	12	The thickness of the ring of CircleProgress.	0.2.0
color	string	True		Custom primary color of CircleProgress. See Supported Color Parsing.	0.2.0
trackColor	string	True		The background color of the ring track of CircleProgress.	0.2.0
showText	boolean	True	true	Whether to show the percentage text in the center of CircleProgress.	0.2.0
pollSizeChange	boolean	True	false	Whether to poll for size changes of CircleProgress.	0.2.0

CircleProgressSlots

Slot	Parameter	Description	Version
default	percentage: number	The default slot in the center of CircleProgress, used for custom content.	0.2.0