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
|