fix(progress-circular): show correct circle arc when changing from indeterminate to determinate mode (#11580)

Author: marosoft

src/components/progressCircular/js/progressCircularDirective.js

@@ -139,6 +139,8 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
       var mode = newValues[1];
       var isDisabled = newValues[2];
       var wasDisabled = oldValues[2];
+      var diameter = 0;
+      var strokeWidth = 0;
 
       if (isDisabled !== wasDisabled) {
         element.toggleClass(DISABLED_CLASS, !!isDisabled);
@@ -153,14 +155,28 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
         }
 
         if (mode === MODE_INDETERMINATE) {
+          if (oldValues[1] === MODE_DETERMINATE) {
+            diameter = getSize(scope.mdDiameter);
+            strokeWidth = getStroke(diameter);
+            path.attr('d', getSvgArc(diameter, strokeWidth, true));
+            path.attr('stroke-dasharray', (diameter - strokeWidth) * $window.Math.PI * 0.75);
+          }
           startIndeterminateAnimation();
         } else {
           var newValue = clamp(newValues[0]);
+          var oldValue = clamp(oldValues[0]);
 
           cleanupIndeterminateAnimation();
 
+          if (oldValues[1] === MODE_INDETERMINATE) {
+            diameter = getSize(scope.mdDiameter);
+            strokeWidth = getStroke(diameter);
+            path.attr('d', getSvgArc(diameter, strokeWidth, false));
+            path.attr('stroke-dasharray', (diameter - strokeWidth) * $window.Math.PI);
+          }
+
           element.attr('aria-valuenow', newValue);
-          renderCircle(clamp(oldValues[0]), newValue);
+          renderCircle(oldValue, newValue);
         }
       }