@forter/progress-circle
v4.1.12
Published
Progress Circle from Forter Components
Downloads
230
Readme
fc-progress-circle
show progress by nice border around the circle depends on you score.
Usage
<script>
import '@forter/progress-circle';
</script>
<fc-progress-circle>
</fc-progress-circle>
Properties
| Property | Attribute | Type | Default | Description |
|--------------|--------------|--------------------------------------------------|---------|---------------------------------------------|
| intent | intent | "primary" \| "secondary" \| "success" \| "apply" \| "danger" \| "warn" | | The button's intent. See Intents in README. |
| percentage | percentage | number | 100 | score as number. example: 95 |
| size | size | "small" \| "medium" \| "large" | | Pre-Defined size |
CSS Custom Properties
| Property | Description |
|-----------------------------------|--------------------------------------------------|
| --fc-progress-circle-color | the color. default: var(--violet), example: gold |
| --fc-progress-circle-content | content inside circle. example: '100' |
| --fc-progress-circle-font-color | content font color |
| --fc-progress-circle-size | height and width. default: 88px, example: 66px |