Progress Circle

A progress circle visually showing the percentage of a task completed.

0%

Usage

import { ProgressCircle } from "@lemonsqueezy/wedges";
<ProgressCircle value={50} />

API Reference

PropValueDefault
color
Enum
"primary"
disableAnimation
boolean
false
disabled
boolean
false
getValueLabel
function
/
max
number
100
size
Enum
"md"
value
number | null
/
Data attributeValue
[data-max]
The max value
[data-state]
"complete" | "indeterminate" | "loading"
[data-value]
The current value

Accessibility

Adheres to the progressbar role requirements.

Examples

75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
75%
Edit this page