Progress Circle
Progress Circle is a component that displays progress as a circular or semi-circular indicator.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | string | 'md' | Size of the circle: 'xxs', 'xs', 'sm', 'md', 'lg' |
progress | number | 0 | Progress value (0-100) |
shape | string | 'circle' | Shape of the progress indicator: 'circle' or 'half' |
Basic Usage
Circle Shape - Different Sizes
40%
Active users40%
Active users40%
Active users40%
Active users40%
html
<ProgressCircle size="xxs" :progress="40" shape="circle" />
<ProgressCircle size="xs" :progress="40" shape="circle" />
<ProgressCircle size="sm" :progress="40" shape="circle" />
<ProgressCircle size="md" :progress="40" shape="circle" />
<ProgressCircle size="lg" :progress="40" shape="circle" />Half Circle Shape - Different Sizes
40%
Active users40%
Active users40%
Active users40%
Active users40%
html
<ProgressCircle size="xxs" :progress="40" shape="half" />
<ProgressCircle size="xs" :progress="40" shape="half" />
<ProgressCircle size="sm" :progress="40" shape="half" />
<ProgressCircle size="md" :progress="40" shape="half" />
<ProgressCircle size="lg" :progress="40" shape="half" />Custom Progress Values
html
<ProgressCircle :progress="25" />
<ProgressCircle :progress="50" />
<ProgressCircle :progress="75" />
<ProgressCircle :progress="100" />