bump the version, update the docs and demo, concatenate and minify the files

Author: crisbeto

README.md

@@ -38,7 +38,7 @@ angular.module('someModule', ['angular-svg-round-progress'])
 | `clockwise`    | Whether the progressbar should rotate clockwise or counter-clockwise.                                     | No        | true              | Boolean           |
 | `responsive`   | Whether the progressbar should fit inside its parent container. **Note** Turning this option on will override the specified radius in order to make the circle fit in its parent. The radius to stroke ratio won't change.                                     | No        | false              | Boolean           |
 | `rounded`      | Whether the current progress ending should be rounded or straight.                                        | No        | false             | Boolean           |
-| `iterations`   | Number of iterations for the animation. Set it to 1 for no animation and increase for slower animation.   | No        | 50                | Integer           |
+| `duration`     | The duration of the animation. Pass 0 for no animation.                                                   | No        | 800               | Integer           |
 | `animation`    | The easing function that will be used when animating.                                                     | No        | easeOutCubic      | linearEase <br> easeInQuad <br> easeOutQuad <br> easeInOutQuad <br> easeInCubic <br> easeOutCubic <br> easeInOutCubic <br> easeInQuart <br> easeOutQuart <br> easeInOutQuart <br> easeInQuint <br> easeOutQuint <br> easeInOutQuint <br> easeInSine <br> easeOutSine <br> easeInOutSine <br> easeInExpo <br> easeOutExpo <br> easeInOutExpo <br> easeInCirc <br> easeOutCirc <br> easeInOutCirc <br> easeInElastic <br> easeOutElastic <br> easeInOutElastic <br> easeInBack <br> easeOutBack <br> easeInOutBack <br> easeInBounce <br> easeOutBounce <br> easeInOutBounce <br> |
 
 
@@ -57,7 +57,7 @@ angular.module('someModule', ['angular-svg-round-progress'])
     rounded="true"
     clockwise="false"
     responsive="false"
-    iterations="50"
+    duration="800"
     animation="easeInOutQuart"></div>
 ```
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-svg-round-progressbar",
-  "version": "0.2.11",
+  "version": "0.3.0",
   "homepage": "https://github.com/crisbeto/angular-svg-round-progressbar",
   "authors": [
     "crisbeto"

build/index.html

@@ -106,7 +106,7 @@ <h2>Sample progressbar</h2>
                 stroke="{{ stroke }}"
                 clockwise="clockwise"
                 responsive="responsive"
-                iterations="{{ iterations }}"
+                duration="{{ duration }}"
                 animation="{{ currentAnimation }}">
 
                 <svg>
@@ -173,8 +173,8 @@ <h3>Customize!</h3>
             </div>
 
             <div class="cf">
-                <label for="iterations">Iterations:</label>
-                <input id="iterations" type="number" ng-model="iterations"/>
+                <label for="duration">Duration:</label>
+                <input id="duration" type="number" ng-model="duration"/>
             </div>
 
             <div class="cf">
@@ -234,7 +234,7 @@ <h2>Clock example</h2>
             $scope.clockwise =      true;
             $scope.currentColor =   '#45ccce';
             $scope.bgColor =        '#eaeaea';
-            $scope.iterations =     50;
+            $scope.duration =       800;
             $scope.currentAnimation = 'easeOutCubic';
 
             $scope.increment = function(amount){

build/roundProgress.js

@@ -44,7 +44,7 @@ angular.module('angular-svg-round-progress').constant('roundProgressConfig', {
     color:          "#45ccce",
     bgcolor:        "#eaeaea",
     stroke:         15,
-    iterations:     50,
+    duration:       800,
     animation:      "easeOutCubic"
 });
 
@@ -98,10 +98,10 @@ angular.module('angular-svg-round-progress').service('roundProgressService', [fu
 
     service.animations = {
 
-        // t: Current iteration
-        // b: Start value
-        // c: Change in value
-        // d: Total iterations
+        // t: is the current time (or position) of the tween. This can be seconds or frames, steps, seconds, ms, whatever – as long as the unit is the same as is used for the total time.
+        // b: is the beginning value of the property.
+        // c: is the change between the beginning and destination value of the property.
+        // d: is the total time of the tween.
         // jshint eqeqeq: false, -W041: true
 
         linearEase: function(t, b, c, d) {
@@ -300,14 +300,15 @@ angular.module('angular-svg-round-progress')
                     color:          "@",
                     bgcolor:        "@",
                     stroke:         "@",
-                    iterations:     "@",
+                    duration:       "@",
                     animation:      "@"
                 },
                 link: function(scope, element){
                     var svg         = angular.element(element[0].querySelector('svg'));
                     var ring        = svg.find('path');
                     var background  = svg.find('circle');
                     var options     = angular.copy(roundProgressConfig);
+                    var lastAnimationId;
 
                     var renderCircle = function(){
                         var isSemicircle     = options.semi;
@@ -358,35 +359,43 @@ angular.module('angular-svg-round-progress')
 
                     var renderState = function(newValue, oldValue){
                         var max                 = service.toNumber(options.max || 0);
-                        var current             = newValue > max ? max : (newValue < 0 || !newValue ? 0 : newValue);
-                        var start               = (oldValue === current || oldValue < 0) ? 0 : (oldValue || 0); // fixes the initial animation
-                        var changeInValue       = current - start;
+                        var end                 = newValue > max ? max : (newValue < 0 || !newValue ? 0 : newValue);
+                        var start               = (oldValue === end || oldValue < 0) ? 0 : (oldValue || 0); // fixes the initial animation
+                        var changeInValue       = end - start;
 
                         var easingAnimation     = service.animations[options.animation];
-                        var currentIteration    = 0;
-                        var totalIterations     = parseInt(options.iterations);
+                        var startTime           = new Date();
+                        var duration            = parseInt(options.duration);
 
                         var radius              = options.radius;
                         var circleSize          = radius - (options.stroke/2);
                         var elementSize         = radius*2;
 
-                        (function animation(){
-                            service.updateState(
-                                easingAnimation(currentIteration, start, changeInValue, totalIterations),
-                                max,
-                                circleSize,
-                                ring,
-                                elementSize,
-                                options.semi);
-
-                            if(currentIteration < totalIterations){
-                                $window.requestAnimationFrame(animation);
-                                currentIteration++;
-                            }
-                        })();
+                        $window.cancelAnimationFrame(lastAnimationId);
+
+                        // below 25ms stuff starts to break
+                        if(duration > 25){
+                            (function animation(){
+                                var currentTime = new Date() - startTime;
+
+                                service.updateState(
+                                    easingAnimation(currentTime, start, changeInValue, duration),
+                                    max,
+                                    circleSize,
+                                    ring,
+                                    elementSize,
+                                    options.semi);
+
+                                if(currentTime < duration){
+                                    lastAnimationId = $window.requestAnimationFrame(animation);
+                                }
+                            })();
+                        }else{
+                            service.updateState(end, max, circleSize, ring, elementSize, options.semi);
+                        }
                     };
 
-                    scope.$watchCollection('[current, max, semi, rounded, clockwise, radius, color, bgcolor, stroke, iterations, responsive]', function(newValue, oldValue, scope){
+                    scope.$watchCollection('[current, max, semi, rounded, clockwise, radius, color, bgcolor, stroke, duration, responsive]', function(newValue, oldValue, scope){
 
                         // pretty much the same as angular.extend,
                         // but this skips undefined values and internal angular keys