diff --git a/examples/routers/progress.vue b/examples/routers/progress.vue
index 3bb7b21a..8d335823 100644
--- a/examples/routers/progress.vue
+++ b/examples/routers/progress.vue
@@ -12,10 +12,17 @@
         <Progress  :percent="100"></Progress>
         <Progress  :percent="25" hide-info></Progress>
         <Progress :percent="10" :stroke-width="20" text-inside></Progress>
+        <Progress :percent="90" :stroke-color="color1"></Progress>
+        <Progress :percent="90" :stroke-color="color2" status="active"></Progress>
     </div>
 </template>
 <script>
     export default {
-
+        data () {
+            return {
+                color1: '#ff6600',
+                color2: ['#108ee9', '#87d068']
+            }
+        }
     }
 </script>
diff --git a/src/components/progress/progress.vue b/src/components/progress/progress.vue
index 5587239a..8cdff7fa 100644
--- a/src/components/progress/progress.vue
+++ b/src/components/progress/progress.vue
@@ -54,7 +54,7 @@
                 default: false
             },
             strokeColor: {
-                type: String
+                type: [String, Array]
             },
             textInside: {
                 type: Boolean,
@@ -93,7 +93,11 @@
                 };
 
                 if (this.strokeColor) {
-                    style['background-color'] = this.strokeColor;
+                    if (typeof this.strokeColor === 'string') {
+                        style['background-color'] = this.strokeColor;
+                    } else {
+                        style['background-image'] = `linear-gradient(to right, ${this.strokeColor[0]} 0%, ${this.strokeColor[1]} 100%)`;
+                    }
                 }
 
                 return style;