From 2de537820882170ad749320fd3523a90c0f748d0 Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Wed, 28 Feb 2018 08:57:35 -0800
Subject: [PATCH] use a separate circle in the progress svg for indefinite
 progress. fixes #771

---
 app/templates/progress/index.js     | 11 ++++++++++-
 app/templates/progress/progress.css |  4 ++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/templates/progress/index.js b/app/templates/progress/index.js
index 5a89cd7e..f9f67e44 100644
--- a/app/templates/progress/index.js
+++ b/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}"
diff --git a/app/templates/progress/progress.css b/app/templates/progress/progress.css
index 8659d78f..410b0be0 100644
--- a/app/templates/progress/progress.css
+++ b/app/templates/progress/progress.css
@@ -37,3 +37,7 @@
   line-height: 58px;
   user-select: none;
 }
+
+.progress--invisible {
+  display: none;
+}