1.1.3 • Published 2 years ago
@forter/counter-circle v1.1.3
fc-counter-circle
An element by Forter
Usage
<script>
import '@forter/counter-circle';
</script>
<fc-counter-circle completed="1" total="2">
</fc-counter-circleExamples
<!-- 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) |