Progress add prop success-percent

src/components/circle/circle.vue

@@ -96,13 +96,13 @@
                     style = {
                         'stroke-dasharray': `${(this.percent / 100) * (this.len - 75)}px ${this.len}px`,
                         'stroke-dashoffset': `-${75 / 2}px`,
-                        'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s'
+                        'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .6s ease 0s, stroke .6s, stroke-width .06s ease .6s'
                     };
                 } else {
                     style = {
                         'stroke-dasharray': `${this.len}px ${this.len}px`,
                         'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
-                        'transition': 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease'
+                        'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
                     };
                 }
                 return style;

src/components/progress/progress.vue

@@ -3,6 +3,7 @@
         <div :class="outerClasses">
             <div :class="innerClasses">
                 <div :class="bgClasses" :style="bgStyle"></div>
+                <div :class="successBgClasses" :style="successBgStyle"></div>
             </div>
         </div>
         <span v-if="!hideInfo" :class="textClasses">
@@ -30,6 +31,10 @@
                 type: Number,
                 default: 0
             },
+            successPercent: {
+                type: Number,
+                default: 0
+            },
             status: {
                 validator (value) {
                     return oneOf(value, ['normal', 'active', 'wrong', 'success']);
@@ -80,6 +85,15 @@
                     height: `${this.strokeWidth}px`
                 };
             },
+            successBgStyle () {
+                return this.vertical ? {
+                    height: `${this.successPercent}%`,
+                    width: `${this.strokeWidth}px`
+                } : {
+                    width: `${this.successPercent}%`,
+                    height: `${this.strokeWidth}px`
+                };
+            },
             wrapClasses () {
                 return [
                     `${prefixCls}`,
@@ -105,6 +119,9 @@
             },
             bgClasses () {
                 return `${prefixCls}-bg`;
+            },
+            successBgClasses () {
+                return `${prefixCls}-success-bg`;
             }
         },
         created () {