fix(progress-circle): actually render on Firefox & Edge (#283)

Author: josephperrott

src/components/progress-circle/progress-circle.html

@@ -5,5 +5,6 @@
 -->
 <svg viewBox="0 0 100 100"
      preserveAspectRatio="xMidYMid meet">
-  <circle [style.strokeDashoffset]="strokeDashOffset()"></circle>
+  <circle [style.strokeDashoffset]="strokeDashOffset()"
+          cx="50px" cy="50px" r="40px"></circle>
 </svg>

src/components/progress-circle/progress-circle.scss

@@ -12,7 +12,6 @@ $md-progress-circle-sporadic-rotate-duration : $md-progress-circle-duration !def
 $md-progress-circle-stroke-width: 10px !default;
 $md-progress-circle-radius: 40px !default;
 $md-progress-circle-circumference: $pi * $md-progress-circle-radius * 2 !default;
-$md-progress-circle-center-point: 50px !default;
 // Height and weight of the viewport for md-progress-circle.
 $md-progress-circle-viewport-size : 100px !default;
 
@@ -40,20 +39,17 @@ $md-progress-circle-viewport-size : 100px !default;
   svg {
     height: 100%;
     width: 100%;
+    transform: rotate(-90deg);
+    transform-origin: center;
   }
 
 
   circle {
-    cx: $md-progress-circle-center-point;
-    cy: $md-progress-circle-center-point;
     fill: transparent;
-    r: $md-progress-circle-radius;
     stroke: md-color($md-primary, 600);
     /** Stroke width of 10px defines stroke as 10% of the viewBox */
     stroke-width: $md-progress-circle-stroke-width;
     /** SVG circle rotations begin rotated 90deg clockwise from the circle's center top */
-    transform: rotate(-90deg);
-    transform-origin: center;
     transition: stroke-dashoffset 0.225s linear;
     /** The dash array of the circle is defined as the circumference of the circle. */
     stroke-dasharray: $md-progress-circle-circumference;
@@ -73,18 +69,25 @@ $md-progress-circle-viewport-size : 100px !default;
   }
 
 
-  &[mode="indeterminate"] circle {
+
+
+  &[mode="indeterminate"] {
     animation-duration: $md-progress-circle-sporadic-rotate-duration,
-                        $md-progress-circle-constant-rotate-duration,
-                        $md-progress-circle-value-change-duration;
+                        $md-progress-circle-constant-rotate-duration;
     animation-name: md-progress-circle-sporadic-rotate,
-                    md-progress-circle-linear-rotate,
-                    md-progress-circle-value-change;
+                    md-progress-circle-linear-rotate;
     animation-timing-function: $ease-in-out-curve-function,
-                               linear,
-                               $ease-in-out-curve-function;
+                               linear;
     animation-iteration-count: infinite;
     transition: none;
+
+    circle {
+      animation-duration: $md-progress-circle-value-change-duration;
+      animation-name: md-progress-circle-value-change;
+      animation-timing-function: $ease-in-out-curve-function;
+      animation-iteration-count: infinite;
+      transition: none;
+    }
   }
 }