Angular Counter
Angular Counter is a directive to animate number increment/decrement.
Check out the demo page at http://indrimuska.github.io/angular-counter.
Dependencies
- jQuery >= 1.7.1
- jQuery Easing by gsgd, CDN here
- AngularJS
Installation
In your HTML file:
<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>In your JS code:
var app = angular.module('MyApp', ['counter']);Usage
All attributes are self-explanatory.
<!-- `counter` directive can be used as: Element / Class / Attribute -->
<div class="counter"
value="ctrl.myValue"
to="ctrl.numberToReach"
duration="ctrl.theDuration"
effect="ctrl.myEffect"
finish="ctrl.counterFinish()"> {{ ctrl.value | number:0 }} % </div>
<!-- bind counter value anywhere -->
<span ng-bind="ctrl.value"></span>INFO: Animation starts every time the attribute to changes.
License
Copyright (c) 2015 Indri Muska. Licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent