Made circular progress have a single color and made it changeable via a property.

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 {
@@ -29,24 +29,6 @@ class CircularProgress extends IgniteElement {
             }
         }
 
-        @keyframes colors {
-            0% {
-                stroke: #4285F4;
-            }
-            25% {
-                stroke: #DE3E35;
-            }
-            50% {
-                stroke: #F7C223;
-            }
-            75% {
-                stroke: #1B9A59;
-            }
-            100% {
-                stroke: #4285F4;
-            }
-        }
-
         @keyframes dash {
             0% {
                 stroke-dasharray: 1px, 200px;
@@ -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)
             )