From b850b82fe76710dff99a86ab92e393fa0bb007c6 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Wed, 10 Mar 2021 08:57:10 -0800
Subject: [PATCH] Made circular progress have a single color and made it
 changeable via a property.

---
 circular-progress.js | 26 +++++---------------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/circular-progress.js b/circular-progress.js
index 91cd77b..411d0aa 100644
--- a/circular-progress.js
+++ b/circular-progress.js
@@ -17,7 +17,7 @@ class CircularProgress extends IgniteElement {
         mt-circular-progress > div > svg > circle {
             stroke-dasharray: 80px, 200px;
             stroke-dashoffset: 0px;
-            animation: dash 2s ease-in-out infinite, colors 5.6s ease-in-out infinite;
+            animation: dash 2s ease-in-out infinite;
         }
 
         @keyframes rotator {
@@ -28,24 +28,6 @@ class CircularProgress extends IgniteElement {
                 transform: rotate(360deg);
             }
         }
-          
-        @keyframes colors {
-            0% {
-                stroke: #4285F4;
-            }
-            25% {
-                stroke: #DE3E35;
-            }
-            50% {
-                stroke: #F7C223;
-            }
-            75% {
-                stroke: #1B9A59;
-            }
-            100% {
-                stroke: #4285F4;
-            }
-        }
 
         @keyframes dash {
             0% {
@@ -68,7 +50,8 @@ class CircularProgress extends IgniteElement {
         return {
             loading: true,
             size: "4em",
-            stroke: "3.6"
+            strokeWidth: "3.6",
+            stroke: "#4285F4"
         };
     }
 
@@ -88,7 +71,8 @@ class CircularProgress extends IgniteElement {
                             .attribute("cy", "44")
                             .attribute("r", "20.2")
                             .attribute("fill", "none")
-                            .attribute("stroke-width", this.stroke)
+                            .attribute("stroke-width", this.strokeWidth)
+                            .attribute("stroke", this.stroke)
                     ),
                 new slot(this)
             )