Angular Counter

Angular Counter is a directive to animate number increment/decrement.

To:

Duration (ms):

Effect:

{{ ctrl.myValue | number: 0 }}%

If you use Bootstrap progress bars remember to remove transition rule in your stylesheet!

Finish

Installation

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="./js/angular-counter.js"></script>

var app = angular.module('MyApp', ['counter']);

Usage

<!-- `counter` directive can be used as: Element / Class / Attribute -->
<div    class="counter"
        value="ctrl.myValue"
           to="ctrl.myTarget"
     duration="ctrl.myDuration"
       effect="ctrl.myEffect"
       finish="ctrl.counterFinish()"> {{ ctrl.myValue | number:0 }} % </div>

<!-- bind counter value anywhere -->
<span ng-bind="ctrl.myValue"></span>

INFO Animation starts every time the attribute to changes.

Service

Angular Counter directive makes use of a built-in service $counter with a single .count(..) that requires the following parameters:

Parameter	Type	Description
from	`float`	Initial number.
to	`float`	Target number to reach.
duration	`integer`	Duration of the animation in ms.
effect	`string`	Effect name.
step	`function`	Callback after each animation step. Remember to `$apply` the scope!
finish	`function`	Callback at the end of the animation.