@forter/counter-circle

1.1.3 • Public • Published

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)

Package Sidebar

Install

npm i @forter/counter-circle

Weekly Downloads

22

Version

1.1.3

License

Apache-2.0

Unpacked Size

60.3 kB

Total Files

40

Last publish

Collaborators

  • forter-npm
  • lirown
  • oweingart