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)
|