add the animationDelay option

Author: crisbeto

README.md

@@ -44,6 +44,7 @@ angular.module('someModule', ['angular-svg-round-progress'])
 | `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           |
 | `duration`     | The duration of the animation. Pass 0 for no animation.                                                   | No        | 800               | Integer           |
+| `animation-delay` | Milliseconds to wait before starting an animation.                                                   | No        | 0               | Integer           |
 | `offset`       | The margin between the edge of the circle and the SVG element. Mostly used when nesting progressbars. If you pass in "inherit", the offset will be calculated based on the size of the parent progressbar(s)     | No        | 0                 | 'inherit' or 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> |
 
@@ -64,7 +65,8 @@ angular.module('someModule', ['angular-svg-round-progress'])
     clockwise="false"
     responsive="false"
     duration="800"
-    animation="easeInOutQuart"></div>
+    animation="easeInOutQuart"
+    animation-delay="0"></div>
 ```
 
 ## Browser support

build/index.html

@@ -128,7 +128,8 @@ <h2>Sample progressbar</h2>
                 responsive="responsive"
                 duration="{{ duration }}"
                 animation="{{ currentAnimation }}"
-                offset="{{ offset }}">
+                offset="{{ offset }}"
+                animation-delay="{{ animationDelay }}">
 
                 <svg>
                     <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
@@ -208,6 +209,11 @@ <h3>Customize!</h3>
                 <select id="animation" ng-model="currentAnimation" ng-options="animation for animation in animations"></select>
             </div>
 
+            <div class="cf">
+                <label for="delay">Animation delay:</label>
+                <input id="delay" type="number" ng-model="animationDelay"/>
+            </div>
+
             <div class="cf">
                 <label for="color">Color:</label>
                 <input id="color" type="color" ng-model="currentColor"/>
@@ -295,6 +301,7 @@ <h2>Clock example</h2>
             $scope.bgColor =        '#eaeaea';
             $scope.duration =       800;
             $scope.currentAnimation = 'easeOutCubic';
+            $scope.animationDelay = 0;
 
             $scope.increment = function(amount){
                 $scope.current+=(amount || 1);

src/roundProgress.js

@@ -20,7 +20,8 @@ angular.module('angular-svg-round-progress')
                     stroke:         "@",
                     duration:       "@",
                     animation:      "@",
-                    offset:         "@"
+                    offset:         "@",
+                    animationDelay: "@"
                 }
             };
 
@@ -39,6 +40,7 @@ angular.module('angular-svg-round-progress')
                     var background  = svg.find('circle').eq(0);
                     var options     = angular.copy(roundProgressConfig);
                     var lastAnimationId;
+                    var lastTimeoutId;
                     var parentChangedListener;
 
                     scope.getOptions = function(){
@@ -110,36 +112,45 @@ angular.module('angular-svg-round-progress')
                         var changeInValue       = end - start;
 
                         var easingAnimation     = service.animations[options.animation];
-                        var startTime           = new $window.Date();
                         var duration            = +options.duration || 0;
                         var preventAnimation    = preventAnimationOverride || (newValue > max && oldValue > max) || (newValue < 0 && oldValue < 0) || duration < 25;
 
                         var radius              = options.radius;
                         var circleSize          = radius - (options.stroke/2) - service.getOffset(element, options);
                         var elementSize         = radius*2;
                         var isSemicircle        = options.semi;
+                        var doAnimation = function(){
+                            // stops some expensive animating if the value is above the max or under 0
+                            if(preventAnimation){
+                                service.updateState(end, max, circleSize, ring, elementSize, isSemicircle);
+                            }else{
+                                $window.cancelAnimationFrame(lastAnimationId);
+
+                                var startTime = new $window.Date();
+
+                                (function animation(){
+                                    var currentTime = $window.Math.min(new Date() - startTime, duration);
+
+                                    service.updateState(
+                                        easingAnimation(currentTime, start, changeInValue, duration),
+                                        max,
+                                        circleSize,
+                                        ring,
+                                        elementSize,
+                                        isSemicircle);
+
+                                    if(currentTime < duration){
+                                        lastAnimationId = $window.requestAnimationFrame(animation);
+                                    }
+                                })();
+                            }
+                        };
 
-                        // stops some expensive animating if the value is above the max or under 0
-                        if(preventAnimation){
-                            service.updateState(end, max, circleSize, ring, elementSize, isSemicircle);
+                        if(options.animationDelay > 0){
+                            $window.clearTimeout(lastTimeoutId);
+                            $window.setTimeout(doAnimation, options.animationDelay);
                         }else{
-                            $window.cancelAnimationFrame(lastAnimationId);
-
-                            (function animation(){
-                                var currentTime = $window.Math.min(new Date() - startTime, duration);
-
-                                service.updateState(
-                                    easingAnimation(currentTime, start, changeInValue, duration),
-                                    max,
-                                    circleSize,
-                                    ring,
-                                    elementSize,
-                                    isSemicircle);
-
-                                if(currentTime < duration){
-                                    lastAnimationId = $window.requestAnimationFrame(animation);
-                                }
-                            })();
+                            doAnimation();
                         }
                     };
 

src/roundProgressConfig.js

@@ -12,5 +12,6 @@ angular.module('angular-svg-round-progress').constant('roundProgressConfig', {
     stroke:         15,
     duration:       800,
     animation:      "easeOutCubic",
+    animationDelay: 0,
     offset:         0
 });