Merge pull request #777 from mozilla/i771

use a separate circle in the progress svg for indefinite progress

app/templates/progress/index.js

@@ -28,7 +28,16 @@ module.exports = function(progressRatio, indefinite = false) {
         cy="${oRadius}"
         fill="transparent"/>
       <circle
-        class="${indefinite ? 'progress__indefinite' : 'progress__bar'}"
+        class="progress__indefinite ${indefinite ? '' : 'progress--invisible'}"
+        r="${radius}"
+        cx="${oRadius}"
+        cy="${oRadius}"
+        fill="transparent"
+        transform="rotate(-90 ${oRadius} ${oRadius})"
+        stroke-dasharray="${circumference}"
+        stroke-dashoffset="${dashOffset}"/>
+      <circle
+        class="progress__bar ${indefinite ? 'progress--invisible' : ''}"
         r="${radius}"
         cx="${oRadius}"
         cy="${oRadius}"

app/templates/progress/progress.css

@@ -37,3 +37,7 @@
   line-height: 58px;
   user-select: none;
 }
+
+.progress--invisible {
+  display: none;
+}