# countanimator

> A lightweight and dependency-free number counter that animates numbers incrementing or decrementing.

Latest version **1.2.1** (published 2021-09-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install countanimator
pnpm add countanimator
yarn add countanimator
bun add countanimator
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2021-09-22 |
| First published | 2021-09-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Arash Nawyan |
| Maintainers | arash-11 |
| Keywords | lightweight, number, counter, animator |

## Links

- npm: https://www.npmjs.com/package/countanimator
- Repository: https://github.com/Arash-11/CountAnimator
- Homepage: https://github.com/Arash-11/CountAnimator#readme
- Issues: https://github.com/Arash-11/CountAnimator/issues
- npm.io page: https://npm.io/package/countanimator

## Alternatives

- [random-seedable](https://npm.io/package/random-seedable.md) — 27.9K weekly downloads
- [n2words](https://npm.io/package/n2words.md) — 22.2K weekly downloads
- [@stdlib/math-base-special-factorialln](https://npm.io/package/@stdlib/math-base-special-factorialln.md) — 5.7K weekly downloads
- [@stdlib/math-base-special-abs2](https://npm.io/package/@stdlib/math-base-special-abs2.md) — 1.7K weekly downloads
- [commons-math-interpolation](https://npm.io/package/commons-math-interpolation.md) — 1.4K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2021-09-22
- 1.2.0 — 2021-09-22
- 1.1.0 — 2021-09-22
- 1.0.0 — 2021-09-22

## README

![npm](https://img.shields.io/npm/dt/countanimator?style=for-the-badge)

# CountAnimator

A lightweight and dependency-free number counter that animates numbers incrementing or decrementing, which allows you to control the 'speed' too!

## Usage

1. Either include the CDN
```
https://unpkg.com/countanimator@1.2.1/dist/countanimator.js
```
or install it as an NPM package.
```
npm i countanimator
```

2. Import the package (you can skip this step if you've included the CDN script).
```
import CountAnimator from 'countanimator';
```

3. Pass the necessary arguments to the constructor.

The constructor takes two arguments - an HTML element and an optional object (consists of the following keys: `start`, `end`, `steps`, `delay`).

 - `selector` - selector for the element that should output the number (_required_)

 - `start` - number to start counting from (_default value is 0_)
 - `end` - number to end counting at (_default value is 100_)
 - `steps` - number of steps to increment or decrement by. Only whole numbers are allowed (ie. 0, 1, 2, 3, 4, ...) (_default value is 1_)
 - `delay` - number to indicate the delay between increments or decrements. You can think of this as the "speed" of the number counter. Negative numbers cannot be used. Maximum value is 100 (_default value is 50_)

 ```
const options = {
    start: 0,
    end: 50,
    steps: 1,
    delay: 70
};
```

4. Instantiate the `CountAnimator` class and pass in the arguments object.

```
const countAnimator = new CountAnimator(selector, options);
```

5. Initialize the counter when you're ready by invoking `.init()`.

```
countAnimator.init();
```

<br />

## Example
Example of a simple program that counts from 0 to 50 when you click a button:

```js
import CountAnimator from 'countanimator'; // not required if using CDN

const btn = document.querySelector('button');

const options = {
  start: 0,
  end: 50,
  steps: 1,
  delay: 70
};

const countAnimator = new CountAnimator('div', options);

btn.addEventListener('click', () => {
  countAnimator.init();
});
```

---
_Source: https://npm.io/package/countanimator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._