@forter/counter-circle
v1.1.3
Published
counter-circle from Forter Components
Downloads
8
Readme
fc-counter-circle
An element by Forter
Usage
<script>
import '@forter/counter-circle';
</script>
<fc-counter-circle completed="1" total="2">
</fc-counter-circle
Examples
<!-- default size with zero state -->
<fc-counter-circle completed="0" total="4">
</fc-counter-circle>
<!-- default size with completed and total -->
<fc-counter-circle completed="12" total="16">
</fc-counter-circle>
<!-- custom radius with fully completed single digits -->
<fc-counter-circle radius="30" completed="2" total="2">
</fc-counter-circle>
<!-- custom radius with 50 percent completed -->
<fc-counter-circle radius="40" completed="8" total="16">
</fc-counter-circle>
<!-- larger custom radius -->
<fc-counter-circle radius="60" completed="3" total="12">
</fc-counter-circle>
Properties
| Property | Attribute | Type | Default | Description |
|--------------------|-------------|----------|---------|--------------------------|
| completed
| completed
| number
| 0 | Count of tasks completed |
| cssCircumference
| | number
| | cssCircumference |
| cssRadius
| | number
| | cssRadius |
| piCircumference
| | number
| | piCircumference |
| radius
| radius
| number
| 18 | Radius |
| total
| total
| number
| 4 | Count of total tasks |
CSS Custom Properties
| Property | Description |
|-------------------------------------------------|--------------------------------------------------|
| --fc-counter-circle-animation-duration
| fill animation duration. example: 600ms
|
| --fc-counter-circle-animation-timing-function
| fill animation timing function. example: ease-in-out
|
| --fc-counter-circle-empty-color
| empty color. example: var(--cyan-1)
|
| --fc-counter-circle-face-color
| face background color. example: var(--indigo-1)
|
| --fc-counter-circle-fill-color
| fill color. example: var(--pink-4)
|
| --fc-counter-circle-font-color
| font color. example: var(--cyan-9)
|