https://github.com/skybrud/sky-count
Vue component for intelligently animating counting of numbers
https://github.com/skybrud/sky-count
Last synced: 10 months ago
JSON representation
Vue component for intelligently animating counting of numbers
- Host: GitHub
- URL: https://github.com/skybrud/sky-count
- Owner: skybrud
- License: mit
- Created: 2018-06-14T09:09:58.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-16T18:48:54.000Z (almost 8 years ago)
- Last Synced: 2025-07-11T23:46:41.196Z (12 months ago)
- Language: JavaScript
- Size: 175 KB
- Stars: 0
- Watchers: 8
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sky-count
> Count to infinity and beyond (well, close enough at least)
## Description
SkyCount is a simple component that takes any string containing numbers, such as `"1.234.000"` or `"23.5%"`, and animates a counter from 0 to the given value while retaining all non-digit characters. This enables you to easily append or prepend text and symbols to the counted number or control the way numbers are chunked (English style `"000,000.00"` vs German etc. `"000.000,00"`).
## Installation
```bash
npm install sky-count
```
or
```bash
yarn add sky-count
```
## Usage
Begin by importing and installing the SkyCount Vue plugin:
```js
import Vue from 'vue';
import SkyCount from 'sky-count';
Vue.use(SkyCount);
```
The `` component registers globally and can now be used. It's primary interface is the `trigger` prop, which it watches. When it is true, it counts upwards towards the value of the `to` prop (retaining its non-digit characters while animating).
Basic example:
``` html
```
The number kan also be padded with zeros, so the string length is kept the same throughout the animation. This will make the animation look less "jittery" but might not always be what you're going for.
``` html
```
If you want to pad the number with something else than zeros you can do so like this:
``` html
```
If you want to start the animation from another value than zero this is also possible:
``` html
```
The animation can also be customized:
``` html
```
Lastly, you can make the number continue slowly incrementing after the animation is done (A simple setInterval under the hood for now).
``` html
```
# Credits
This module is made by the Frontenders at [skybrud.dk](http://www.skybrud.dk/). Feel free to use it in any way you want. Feedback, questions and bugreports should be posted as issues. Pull-requests appreciated!