@forter/progress-circle
v4.1.10
Published
Progress Circle from Forter Components
Downloads
98
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
|