@forter/counter-circle

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)