https://github.com/kcmr/count-up

A wrapper component for CountUp.js
https://github.com/kcmr/count-up

count-down count-up counter polymer web-component

Last synced: 24 days ago
JSON representation

A wrapper component for CountUp.js

• Host: GitHub
• URL: https://github.com/kcmr/count-up
• Owner: kcmr
• License: mit
• Created: 2017-06-18T00:49:47.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-05T14:20:52.000Z (almost 7 years ago)
• Last Synced: 2024-11-17T19:47:07.054Z (about 2 months ago)
• Topics: count-down, count-up, counter, polymer, web-component
• Language: HTML
• Homepage: https://kcmr.github.io/count-up/components/count-up/demo/index.html
• Size: 2.55 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# <count-up> 

[__Check out the demo__](https://kcmr.github.io/count-up/components/count-up/demo/index.html)

`` is a wrapper component for [CountUp.js](https://github.com/inorganik/countUp.js) that displays an animated count up (or down) with configurable options like the duration, the easing function for the animation or the decimal separator, etc.

For examples of the easing function, check out [CountUp's demo](http://inorganik.github.io/countUp.js/).

__Basic example:__

```html

```

__Update the current value from the previous `updateTo` value instead of `startValue`:__

```html

```

```js

_onSomeValueChanged: function(value) {

  this.someValue = value;

}

```

__With decimals and custom decimal separators:__

```html

```

## Styling

The following custom properties and mixins are available for styling:

| Custom property | Description            | Default |

| :-------------- | :--------------------- | :------ |

| --count-up      | Mixin applied to :host | {}      |