Skip to content

kcmr/count-up

Repository files navigation

<count-up>

Check out the demo

<count-up> is a wrapper component for 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.

Basic example:

<count-up start-value="100" end-value="2000"></count-up>

Update the current value from the previous updateTo value instead of startValue:

<count-up update-to="[[someValue]]"></count-up>
_onSomeValueChanged: function(value) {
  this.someValue = value;
}

With decimals and custom decimal separators:

<count-up decimals="2" decimal="," separator="."></count-up>

Styling

The following custom properties and mixins are available for styling:

Custom property Description Default
--count-up Mixin applied to :host {}