fix: apply loader gradient color correctly

Author: setaman

src/App.vue

@@ -38,7 +38,32 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
-        <ve-progress :progress="progress" :loading="loading" :thickness="10" :empty-thickness="20" line-mode="center">
+        <ve-progress
+          :progress="progress"
+          :loading="loading"
+          :thickness="10"
+          :empty-thickness="20"
+          line-mode="center"
+          :color="{
+            colors: [
+              { color: 'red', offset: '0' },
+              { color: 'green', offset: '50' },
+              { color: 'blue', offset: '100' },
+            ],
+          }"
+          :loader="{
+            color: {
+              colors: [
+                { color: 'yellow', offset: '0' },
+                { color: 'black', offset: '50' },
+                { color: 'blue', offset: '100' },
+              ],
+            },
+            thickness: 20,
+            lineMode: 'in 10',
+            opacity: '0.6',
+          }"
+        >
         </ve-progress>
       </div>
       <ve-progress

src/components/Circle/CircleContainer.vue

@@ -12,6 +12,7 @@
             type="empty-fill"
             :id="options.id"
           />
+          <gradient v-if="isLoaderColorGradient" :color="options.loader.color" type="loader" :id="options.id" />
         </defs>
         <component :is="circleType" :options="options" :id="options.id" />
       </g>
@@ -51,6 +52,9 @@ export default {
     isEmptyColorFillGradient() {
       return Array.isArray(this.options.emptyColorFill.colors);
     },
+    isLoaderColorGradient() {
+      return Array.isArray(this.options.loader.color.colors);
+    },
   },
 };
 </script>

src/components/Circle/CircleLoader.vue

@@ -6,7 +6,7 @@
       :cx="position"
       :cy="position"
       fill="transparent"
-      :stroke="color"
+      :stroke="loaderColor"
       :stroke-width="options.thickness"
       :stroke-linecap="options.line"
       :stroke-dasharray="circumference"
@@ -37,6 +37,11 @@ export default {
     opacity() {
       return this.options.opacity && this.options.opacity >= 0 ? this.options.opacity : 0.55;
     },
+    loaderColor() {
+      return Array.isArray(this.options.loader.color.colors)
+        ? `url(#ep-loader-gradient-${this.options.id})`
+        : this.options.color;
+    },
   },
 };
 </script>

src/components/Circle/HalfCircle.vue

@@ -43,7 +43,7 @@
     </path>
     <fade-in-transition>
       <g v-if="isLoading">
-        <half-circle-loader :options="options.loader" />
+        <half-circle-loader :options="{ ...options, ...options.loader }" />
       </g>
     </fade-in-transition>
     <path

src/components/Circle/HalfCircleLoader.vue

@@ -5,7 +5,7 @@
       class="ep-half-circle--loader animation__loading"
       :d="path"
       fill="transparent"
-      :stroke="color"
+      :stroke="halfLoaderColor"
       :stroke-dasharray="circumference"
       :stroke-linecap="options.line"
       :style="{
@@ -46,6 +46,11 @@ export default {
     opacity() {
       return this.options.opacity && this.options.opacity >= 0 ? this.options.opacity : 0.55;
     },
+    halfLoaderColor() {
+      return Array.isArray(this.options.loader.color.colors)
+        ? `url(#ep-loader-gradient-${this.options.id})`
+        : this.options.color;
+    },
   },
 };
 </script>