npm package: @forter/counter-circle
Description: counter-circle from Forter Components
Author: Forter Developers
Latest version: 1.1.3

# fc-counter-circle

An element by Forter
<!-- Author: Marissa Traina <marissa.traina@forter.com> -->
[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/display-components-counter-circle--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Fcounter-circle) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/counter-circle/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/counter-circle) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/counter-circle/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/counter-circle) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/counter-circle/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/counter-circle)

## Usage

```html
<script>
   import '@forter/counter-circle';
</script>

<fc-counter-circle completed="1" total="2">
</fc-counter-circle
```

## Examples

```html
<!-- 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)`             |