<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>
The following custom properties and mixins are available for styling:
Custom property | Description | Default |
---|---|---|
--count-up | Mixin applied to :host | {} |