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