From f7ad7defe5ab9f3a5f5f3e02454f15660c36f043 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sat, 22 Feb 2020 19:54:40 +0800
Subject: [PATCH] feat: progress support custom line-gradiend

---
 build/config.js                               |   2 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 185 ++++++++++++------
 .../__snapshots__/index.test.js.snap          |  12 +-
 components/progress/circle.jsx                |  11 +-
 components/progress/demo/gradient-line.md     |  47 +++++
 components/progress/demo/index.vue            |  13 +-
 components/progress/index.en-US.md            |  18 +-
 components/progress/index.zh-CN.md            |  18 +-
 components/progress/line.jsx                  |  61 +++++-
 components/progress/progress.jsx              |  33 ++--
 components/progress/utils.js                  |   3 +-
 components/vc-progress/index.js               |   2 +-
 components/vc-progress/src/Circle.js          | 135 ++++++++-----
 components/vc-progress/src/Line.js            |   2 +
 components/vc-progress/src/types.js           |   6 +-
 types/progress.d.ts                           |   7 +-
 16 files changed, 390 insertions(+), 165 deletions(-)
 create mode 100644 components/progress/demo/gradient-line.md

diff --git a/build/config.js b/build/config.js
index cf9d0776c..b7c8bff87 100644
--- a/build/config.js
+++ b/build/config.js
@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'popover', // dev components
+    componentName: 'progress', // dev components
   },
 };
diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap
index dad696448..fb133bc02 100644
--- a/components/progress/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap
@@ -5,31 +5,31 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
   <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span title="75%" class="ant-progress-text">75%</span></div>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span class="ant-progress-text"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></div>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span class="ant-progress-text"><i aria-label="icon: check" class="anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
   </div>
 </div>
@@ -40,11 +40,11 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
   <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span title="0%" class="ant-progress-text">0%</span></div>
   </div>
   <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-icon-only"><i aria-label="icon: minus" class="anticon anticon-minus"><svg viewBox="64 64 896 896" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
@@ -61,31 +61,31 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
   <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span title="30%" class="ant-progress-text">30%</span></div>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span class="ant-progress-text"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></div>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span class="ant-progress-text"><i aria-label="icon: check" class="anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
   </div>
 </div>
@@ -96,11 +96,11 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
   <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,47
-       a 47,47 0 1 1 0,-94
-       a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,47
-       a 47,47 0 1 1 0,-94
-       a 47,47 0 1 1 0,94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span title="75%" class="ant-progress-text">75%</span></div>
   </div>
 </div>
@@ -131,36 +131,91 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
   <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span title="75 Days" class="ant-progress-text">75 Days</span></div>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span title="Done" class="ant-progress-text">Done</span></div>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span class="ant-progress-text"><span style="color: red;">75</span></span></div>
   </div>
 </div>
 `;
 
+exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
+<div>
+  <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
+    <div>
+      <div class="ant-progress-outer">
+        <div class="ant-progress-inner">
+          <div class="ant-progress-bg" style="width: 99.9%; height: 8px; border-radius: 100px;"></div>
+        </div>
+      </div><span title="99.9%" class="ant-progress-text">99.9%</span>
+    </div>
+  </div>
+  <div class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default">
+    <div>
+      <div class="ant-progress-outer">
+        <div class="ant-progress-inner">
+          <div class="ant-progress-bg" style="width: 99.9%; height: 8px; border-radius: 100px;"></div>
+        </div>
+      </div><span title="99.9%" class="ant-progress-text">99.9%</span>
+    </div>
+  </div>
+  <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
+    <div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
+        <defs>
+          <linearGradient id="ant-progress-gradient-11" x1="100%" y1="0%" x2="0%" y2="0%">
+            <stop offset="0%" stop-color="#108ee9"></stop>
+            <stop offset="100%" stop-color="#87d068"></stop>
+          </linearGradient>
+        </defs>
+        <path d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+        <path d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="url(#ant-progress-gradient-11)" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: [object Object]; stroke-dasharray: 265.77873849369655px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+      </svg><span title="90%" class="ant-progress-text">90%</span></div>
+  </div>
+  <div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
+    <div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
+        <defs>
+          <linearGradient id="ant-progress-gradient-12" x1="100%" y1="0%" x2="0%" y2="0%">
+            <stop offset="0%" stop-color="#108ee9"></stop>
+            <stop offset="100%" stop-color="#87d068"></stop>
+          </linearGradient>
+        </defs>
+        <path d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+        <path d="M 50,50 m 0,-47
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="url(#ant-progress-gradient-12)" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: [object Object]; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+      </svg><span class="ant-progress-text"><i aria-label="icon: check" class="anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/progress/demo/line.md correctly 1`] = `
 <div>
   <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
@@ -266,21 +321,21 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
   <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span title="75%" class="ant-progress-text">75%</span></div>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,47
-       a 47,47 0 1 1 0,-94
-       a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,47
-       a 47,47 0 1 1 0,-94
-       a 47,47 0 1 1 0,94" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94" stroke="" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span title="75%" class="ant-progress-text">75%</span></div>
   </div>
 </div>
@@ -293,7 +348,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
       <div class="ant-progress-outer">
         <div class="ant-progress-inner">
           <div class="ant-progress-bg" style="width: 60%; height: 8px; border-radius: 100px;"></div>
-          <div class="ant-progress-success-bg" style="width: 30%; height: 8px; border-radius: 100px;"></div>
+          <div class="ant-progress-success-bg" style="width: 30%; height: 8px;"></div>
         </div>
       </div><span title="60%" class="ant-progress-text">60%</span>
     </div>
@@ -301,27 +356,27 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
   <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -88.59291283123217px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -88.59291283123217px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span title="60%" class="ant-progress-text">60%</span></div>
   </div>
   <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
     <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
         <path d="M 50,50 m 0,47
-       a 47,47 0 1 1 0,-94
-       a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,47
-       a 47,47 0 1 1 0,-94
-       a 47,47 0 1 1 0,94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 66.09291283123217px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 66.09291283123217px 295.3097094374406px; stroke-dashoffset: -103.59291283123217px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
         <path d="M 50,50 m 0,47
-       a 47,47 0 1 1 0,-94
-       a 47,47 0 1 1 0,94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 66.09291283123217px 295.3097094374406px; stroke-dashoffset: -103.59291283123217px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,-94
+   a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 66.09291283123217px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       </svg><span title="60%" class="ant-progress-text">60%</span></div>
   </div>
 </div>
diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap
index a5644a808..4bddd237a 100644
--- a/components/progress/__tests__/__snapshots__/index.test.js.snap
+++ b/components/progress/__tests__/__snapshots__/index.test.js.snap
@@ -4,11 +4,11 @@ exports[`Progress render format 1`] = `
 <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
   <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
       <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
       <path d="M 50,50 m 0,-47
-       a 47,47 0 1 1 0,94
-       a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
+   a 47,47 0 1 1 0,94
+   a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
     </svg><span title="50%" class="ant-progress-text">50%</span></div>
 </div>
 `;
@@ -31,7 +31,7 @@ exports[`Progress render negetive successPercent 1`] = `
     <div class="ant-progress-outer">
       <div class="ant-progress-inner">
         <div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div>
-        <div class="ant-progress-success-bg" style="width: 0%; height: 8px; border-radius: 100px;"></div>
+        <div class="ant-progress-success-bg" style="width: 0%; height: 8px;"></div>
       </div>
     </div><span title="50%" class="ant-progress-text">50%</span>
   </div>
@@ -44,7 +44,7 @@ exports[`Progress render negetive successPercent 2`] = `
     <div class="ant-progress-outer">
       <div class="ant-progress-inner">
         <div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div>
-        <div class="ant-progress-success-bg" style="width: 10%; height: 8px; border-radius: 100px;"></div>
+        <div class="ant-progress-success-bg" style="width: 10%; height: 8px;"></div>
       </div>
     </div><span title="50 10" class="ant-progress-text">50 10</span>
   </div>
diff --git a/components/progress/circle.jsx b/components/progress/circle.jsx
index 581bffe9f..787e14d56 100644
--- a/components/progress/circle.jsx
+++ b/components/progress/circle.jsx
@@ -44,14 +44,21 @@ const Circle = {
     const circleWidth = strokeWidth || 6;
     const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
     const gapDeg = gapDegree || (type === 'dashboard' && 75);
+    const strokeColor = getStrokeColor(props);
+    const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
+
+    const wrapperClassName = {
+      [`${prefixCls}-inner`]: true,
+      [`${prefixCls}-circle-gradient`]: isGradient,
+    };
 
     return (
-      <div class={`${prefixCls}-inner`} style={circleStyle}>
+      <div class={wrapperClassName} style={circleStyle}>
         <VCCircle
           percent={getPercentage(props)}
           strokeWidth={circleWidth}
           trailWidth={circleWidth}
-          strokeColor={getStrokeColor(props)}
+          strokeColor={strokeColor}
           strokeLinecap={strokeLinecap}
           trailColor={trailColor}
           prefixCls={prefixCls}
diff --git a/components/progress/demo/gradient-line.md b/components/progress/demo/gradient-line.md
new file mode 100644
index 000000000..38ce092b3
--- /dev/null
+++ b/components/progress/demo/gradient-line.md
@@ -0,0 +1,47 @@
+<cn>
+#### 自定义进度条渐变色
+`linear-gradient` 的封装。推荐只传两种颜色。
+</cn>
+
+<us>
+#### Custom line gradient
+A package of `linear-gradient`. It is recommended to only pass two colors.
+</us>
+
+```tpl
+<template>
+  <div>
+    <a-progress
+      :strokeColor="{
+        '0%': '#108ee9',
+        '100%': '#87d068',
+      }"
+      :percent="99.9"
+    />
+    <a-progress
+      :strokeColor="{
+        from: '#108ee9',
+        to: '#87d068',
+      }"
+      :percent="99.9"
+      status="active"
+    />
+    <a-progress
+      type="circle"
+      :strokeColor="{
+        '0%': '#108ee9',
+        '100%': '#87d068',
+      }"
+      :percent="90"
+    />
+    <a-progress
+      type="circle"
+      :strokeColor="{
+        '0%': '#108ee9',
+        '100%': '#87d068',
+      }"
+      :percent="100"
+    />
+  </div>
+</template>
+```
diff --git a/components/progress/demo/index.vue b/components/progress/demo/index.vue
index 6eb52403c..05043efc0 100644
--- a/components/progress/demo/index.vue
+++ b/components/progress/demo/index.vue
@@ -9,6 +9,7 @@ import Dynamic from './dynamic.md';
 import Dashboard from './dashboard.md';
 import Segment from './segment.md';
 import Linecap from './linecap.md';
+import GradientLine from './gradient-line';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 
@@ -40,27 +41,17 @@ export default {
     return (
       <div>
         <md cn={md.cn} us={md.us} />
-        <br />
         <Line />
-        <br />
         <Circle />
-        <br />
         <LineMini />
-        <br />
         <CircleMini />
-        <br />
         <CircleDynamic />
-        <br />
         <Format />
-        <br />
         <Dynamic />
-        <br />
         <Dashboard />
-        <br />
         <Segment />
-        <br />
         <Linecap />
-        <br />
+        <GradientLine />
         <api>
           <template slot="cn">
             <CN />
diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md
index 573299329..665e33f04 100644
--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@@ -8,23 +8,25 @@ Properties that shared by all types.
 | format | template function of the content | function(percent, successPercent) \| v-slot:format="percent, successPercent" | `percent => percent + '%'` |
 | percent | to set the completion percentage | number | 0 |
 | showInfo | whether to display the progress value and the status icon | boolean | true |
-| status | to set the status of the Progress, options: `success` `exception` `active` `normal` | string | - |
+| status | to set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
 | strokeLinecap | to set the style of the progress linecap | Enum{ 'round', 'square' } | `round` |
 | strokeColor | color of progress bar | string | - |
 | successPercent | segmented success percent | number | 0 |
 
 ### `type="line"`
 
-| Property    | Description                                      | Type   | Default |
-| ----------- | ------------------------------------------------ | ------ | ------- |
-| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10      |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10 |  |
+| strokeColor | color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - | 1.5.0 |
 
 ### `type="circle"`
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| width | to set the canvas width of the circular progress, unit: `px` | number | 132 |
-| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| width | to set the canvas width of the circular progress, unit: `px` | number | 132 |  |
+| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 |  |
+| strokeColor | color of circular progress, render `linear-gradient` when passing an object | string \| object | - | 1.5.0 |
 
 ### `type="dashboard"`
 
diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md
index c4d40ad17..be31e02c4 100644
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@@ -8,23 +8,25 @@
 | format | 内容的模板函数 | function(percent, successPercent) \| v-slot:format="percent, successPercent" | `percent => percent + '%'` |
 | percent | 百分比 | number | 0 |
 | showInfo | 是否显示进度数值或状态图标 | boolean | true |
-| status | 状态，可选：`success` `exception` `active` `normal` | string | - |
+| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |
 | strokeLinecap |  | Enum{ 'round', 'square' } | `round` |
 | strokeColor | 进度条的色彩 | string | - |
 | successPercent | 已完成的分段百分比 | number | 0 |
 
 ### `type="line"`
 
-| 属性        | 说明                    | 类型   | 默认值 |
-| ----------- | ----------------------- | ------ | ------ |
-| strokeWidth | 进度条线的宽度，单位 px | number | 10     |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| strokeWidth | 进度条线的宽度，单位 px | number | 10 |  |
+| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - | 1.5.0 |
 
 ### `type="circle"`
 
-| 属性        | 说明                                             | 类型   | 默认值 |
-| ----------- | ------------------------------------------------ | ------ | ------ |
-| width       | 圆形进度条画布宽度，单位 px                      | number | 132    |
-| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6      |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| width | 圆形进度条画布宽度，单位 px | number | 132 |  |
+| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |  |
+| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | 1.5.0 |
 
 ### `type="dashboard"`
 
diff --git a/components/progress/line.jsx b/components/progress/line.jsx
index 6e201fb7d..84eb16053 100644
--- a/components/progress/line.jsx
+++ b/components/progress/line.jsx
@@ -1,5 +1,55 @@
 import { validProgress } from './utils';
 
+/**
+ * {
+ *   '0%': '#afc163',
+ *   '75%': '#009900',
+ *   '50%': 'green',     ====>     '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
+ *   '25%': '#66FF00',
+ *   '100%': '#ffffff'
+ * }
+ */
+export const sortGradient = gradients => {
+  let tempArr = [];
+  // eslint-disable-next-line no-restricted-syntax
+  for (const [key, value] of Object.entries(gradients)) {
+    const formatKey = parseFloat(key.replace(/%/g, ''));
+    if (isNaN(formatKey)) {
+      return {};
+    }
+    tempArr.push({
+      key: formatKey,
+      value,
+    });
+  }
+  tempArr = tempArr.sort((a, b) => a.key - b.key);
+  return tempArr.map(({ key, value }) => `${value} ${key}%`).join(', ');
+};
+
+/**
+ * {
+ *   '0%': '#afc163',
+ *   '25%': '#66FF00',
+ *   '50%': '#00CC00',     ====>  linear-gradient(to right, #afc163 0%, #66FF00 25%,
+ *   '75%': '#009900',              #00CC00 50%, #009900 75%, #ffffff 100%)
+ *   '100%': '#ffffff'
+ * }
+ *
+ * Then this man came to realize the truth:
+ * Besides six pence, there is the moon.
+ * Besides bread and butter, there is the bug.
+ * And...
+ * Besides women, there is the code.
+ */
+export const handleGradient = strokeColor => {
+  const { from = '#1890ff', to = '#1890ff', direction = 'to right', ...rest } = strokeColor;
+  if (Object.keys(rest).length !== 0) {
+    const sortedGradients = sortGradient(rest);
+    return { backgroundImage: `linear-gradient(${direction}, ${sortedGradients})` };
+  }
+  return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
+};
+
 const Line = {
   functional: true,
   render(h, context) {
@@ -13,16 +63,25 @@ const Line = {
       strokeColor,
       strokeLinecap,
     } = props;
+    let backgroundProps;
+    if (strokeColor && typeof strokeColor !== 'string') {
+      backgroundProps = handleGradient(strokeColor);
+    } else {
+      backgroundProps = {
+        background: strokeColor,
+      };
+    }
     const percentStyle = {
       width: `${validProgress(percent)}%`,
       height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
       background: strokeColor,
       borderRadius: strokeLinecap === 'square' ? 0 : '100px',
+      ...backgroundProps,
     };
     const successPercentStyle = {
       width: `${validProgress(successPercent)}%`,
       height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
-      borderRadius: strokeLinecap === 'square' ? 0 : '100px',
+      borderRadius: strokeLinecap === 'square' ? 0 : '',
     };
     const successSegment =
       successPercent !== undefined ? (
diff --git a/components/progress/progress.jsx b/components/progress/progress.jsx
index f6aca2f0e..eda3b8a98 100644
--- a/components/progress/progress.jsx
+++ b/components/progress/progress.jsx
@@ -11,7 +11,7 @@ function addUnit(num, unit) {
   const unitType = unit || 'px';
   return num ? num + unitType : null;
 }
-
+const ProgressStatuses = ['normal', 'exception', 'active', 'success'];
 export const ProgressType = PropTypes.oneOf(['line', 'circle', 'dashboard']);
 export const ProgressSize = PropTypes.oneOf(['default', 'small']);
 
@@ -21,11 +21,11 @@ export const ProgressProps = {
   percent: PropTypes.number,
   successPercent: PropTypes.number,
   format: PropTypes.func,
-  status: PropTypes.oneOf(['normal', 'success', 'active', 'exception']),
+  status: PropTypes.oneOf(ProgressStatuses),
   showInfo: PropTypes.bool,
   strokeWidth: PropTypes.number,
-  strokeLinecap: PropTypes.oneOf(['round', 'square']),
-  strokeColor: PropTypes.string,
+  strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
+  strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   trailColor: PropTypes.string,
   width: PropTypes.number,
   gapDegree: PropTypes.number,
@@ -48,6 +48,21 @@ export default {
     configProvider: { default: () => ConfigConsumerProps },
   },
   methods: {
+    getPercentNumber() {
+      const { successPercent, percent = 0 } = this.$props;
+      return parseInt(
+        successPercent !== undefined ? successPercent.toString() : percent.toString(),
+        10,
+      );
+    },
+
+    getProgressStatus() {
+      const { status } = this.$props;
+      if (ProgressStatuses.indexOf(status) < 0 && this.getPercentNumber() >= 100) {
+        return 'success';
+      }
+      return status || 'normal';
+    },
     renderProcessInfo(prefixCls, progressStatus) {
       const { showInfo, format, type, percent, successPercent } = this.$props;
       if (!showInfo) return null;
@@ -96,15 +111,11 @@ export default {
     } = props;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('progress', customizePrefixCls);
-
-    const progressStatus =
-      parseInt(successPercent !== undefined ? successPercent.toString() : percent.toString(), 10) >=
-        100 && !('status' in props)
-        ? 'success'
-        : status || 'normal';
-    let progress;
+    const progressStatus = this.getProgressStatus();
     const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);
 
+    let progress;
+
     // Render progress shape
     if (type === 'line') {
       const lineProps = {
diff --git a/components/progress/utils.js b/components/progress/utils.js
index 3252d8eb7..a2dd16ddf 100644
--- a/components/progress/utils.js
+++ b/components/progress/utils.js
@@ -1,7 +1,8 @@
 export function validProgress(progress) {
   if (!progress || progress < 0) {
     return 0;
-  } else if (progress > 100) {
+  }
+  if (progress > 100) {
     return 100;
   }
   return progress;
diff --git a/components/vc-progress/index.js b/components/vc-progress/index.js
index 6975783e6..5dc2fdf67 100644
--- a/components/vc-progress/index.js
+++ b/components/vc-progress/index.js
@@ -1,4 +1,4 @@
-// based on rc-progress 2.3.0
+// based on rc-progress 2.5.2
 import Progress, { Line, Circle } from './src/';
 
 export { Line, Circle };
diff --git a/components/vc-progress/src/Circle.js b/components/vc-progress/src/Circle.js
index 534b9069f..241e6902e 100644
--- a/components/vc-progress/src/Circle.js
+++ b/components/vc-progress/src/Circle.js
@@ -18,53 +18,68 @@ const circleDefaultProps = {
 
 Vue.use(ref, { name: 'ant-ref' });
 
+let gradientSeed = 0;
+
+function stripPercentToNumber(percent) {
+  return +percent.replace('%', '');
+}
+
+function toArray(symArray) {
+  return Array.isArray(symArray) ? symArray : [symArray];
+}
+
+function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, gapPosition) {
+  const radius = 50 - strokeWidth / 2;
+  let beginPositionX = 0;
+  let beginPositionY = -radius;
+  let endPositionX = 0;
+  let endPositionY = -2 * radius;
+  switch (gapPosition) {
+    case 'left':
+      beginPositionX = -radius;
+      beginPositionY = 0;
+      endPositionX = 2 * radius;
+      endPositionY = 0;
+      break;
+    case 'right':
+      beginPositionX = radius;
+      beginPositionY = 0;
+      endPositionX = -2 * radius;
+      endPositionY = 0;
+      break;
+    case 'bottom':
+      beginPositionY = radius;
+      endPositionY = 2 * radius;
+      break;
+    default:
+  }
+  const pathString = `M 50,50 m ${beginPositionX},${beginPositionY}
+   a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
+   a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
+  const len = Math.PI * 2 * radius;
+
+  const pathStyle = {
+    stroke: strokeColor,
+    strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
+    strokeDashoffset: `-${gapDegree / 2 + (offset / 100) * (len - gapDegree)}px`,
+    transition:
+      'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s', // eslint-disable-line
+  };
+
+  return {
+    pathString,
+    pathStyle,
+  };
+}
+
 const Circle = {
   props: initDefaultProps(circlePropTypes, circleDefaultProps),
   created() {
     this.paths = {};
+    this.gradientId = gradientSeed;
+    gradientSeed += 1;
   },
   methods: {
-    getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, gapPosition) {
-      const radius = 50 - strokeWidth / 2;
-      let beginPositionX = 0;
-      let beginPositionY = -radius;
-      let endPositionX = 0;
-      let endPositionY = -2 * radius;
-      switch (gapPosition) {
-        case 'left':
-          beginPositionX = -radius;
-          beginPositionY = 0;
-          endPositionX = 2 * radius;
-          endPositionY = 0;
-          break;
-        case 'right':
-          beginPositionX = radius;
-          beginPositionY = 0;
-          endPositionX = -2 * radius;
-          endPositionY = 0;
-          break;
-        case 'bottom':
-          beginPositionY = radius;
-          endPositionY = 2 * radius;
-          break;
-        default:
-      }
-      const pathString = `M 50,50 m ${beginPositionX},${beginPositionY}
-       a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
-       a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
-      const len = Math.PI * 2 * radius;
-      const pathStyle = {
-        stroke: strokeColor,
-        strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
-        strokeDashoffset: `-${gapDegree / 2 + (offset / 100) * (len - gapDegree)}px`,
-        transition:
-          'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s', // eslint-disable-line
-      };
-      return {
-        pathString,
-        pathStyle,
-      };
-    },
     getStokeList() {
       const {
         prefixCls,
@@ -75,13 +90,17 @@ const Circle = {
         gapDegree,
         gapPosition,
       } = this.$props;
-      const percentList = Array.isArray(percent) ? percent : [percent];
-      const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
+      const percentList = toArray(percent);
+      const strokeColorList = toArray(strokeColor);
 
       let stackPtg = 0;
       return percentList.map((ptg, index) => {
         const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
-        const { pathString, pathStyle } = this.getPathStyles(
+        const stroke =
+          Object.prototype.toString.call(color) === '[object Object]'
+            ? `url(#${prefixCls}-gradient-${this.gradientId})`
+            : '';
+        const { pathString, pathStyle } = getPathStyles(
           stackPtg,
           ptg,
           color,
@@ -96,6 +115,7 @@ const Circle = {
           key: index,
           attrs: {
             d: pathString,
+            stroke,
             'stroke-linecap': strokeLinecap,
             'stroke-width': ptg === 0 ? 0 : strokeWidth,
             'fill-opacity': '0',
@@ -125,9 +145,10 @@ const Circle = {
       gapPosition,
       trailColor,
       strokeLinecap,
+      strokeColor,
       ...restProps
     } = this.$props;
-    const { pathString, pathStyle } = this.getPathStyles(
+    const { pathString, pathStyle } = getPathStyles(
       0,
       100,
       trailColor,
@@ -136,7 +157,10 @@ const Circle = {
       gapPosition,
     );
     delete restProps.percent;
-    delete restProps.strokeColor;
+    const strokeColorList = toArray(strokeColor);
+    const gradient = strokeColorList.find(
+      color => Object.prototype.toString.call(color) === '[object Object]',
+    );
     const pathFirst = {
       attrs: {
         d: pathString,
@@ -151,8 +175,25 @@ const Circle = {
 
     return (
       <svg class={`${prefixCls}-circle`} viewBox="0 0 100 100" {...restProps}>
+        {gradient && (
+          <defs>
+            <linearGradient
+              id={`${prefixCls}-gradient-${this.gradientId}`}
+              x1="100%"
+              y1="0%"
+              x2="0%"
+              y2="0%"
+            >
+              {Object.keys(gradient)
+                .sort((a, b) => stripPercentToNumber(a) - stripPercentToNumber(b))
+                .map((key, index) => (
+                  <stop key={index} offset={key} stop-color={gradient[key]} />
+                ))}
+            </linearGradient>
+          </defs>
+        )}
         <path {...pathFirst} />
-        {this.getStokeList()}
+        {this.getStokeList().reverse()}
       </svg>
     );
   },
diff --git a/components/vc-progress/src/Line.js b/components/vc-progress/src/Line.js
index ff2956866..30f0e2f2e 100644
--- a/components/vc-progress/src/Line.js
+++ b/components/vc-progress/src/Line.js
@@ -20,6 +20,7 @@ const Line = {
       strokeWidth,
       trailColor,
       trailWidth,
+      transition,
       ...restProps
     } = this.$props;
 
@@ -59,6 +60,7 @@ const Line = {
             strokeDasharray: `${ptg}px, 100px`,
             strokeDashoffset: `-${stackPtg}px`,
             transition:
+              transition ||
               'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear',
           };
           const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
diff --git a/components/vc-progress/src/types.js b/components/vc-progress/src/types.js
index 3f7f94d0e..f027d27d2 100644
--- a/components/vc-progress/src/types.js
+++ b/components/vc-progress/src/types.js
@@ -17,7 +17,11 @@ export const propTypes = {
   // className: PropTypes.string,
   percent: PropTypes.oneOfType([mixedType, PropTypes.arrayOf(mixedType)]),
   prefixCls: PropTypes.string,
-  strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  strokeColor: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
+    PropTypes.object,
+  ]),
   strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
   strokeWidth: mixedType,
   // style: PropTypes.object,
diff --git a/types/progress.d.ts b/types/progress.d.ts
index ea2f16808..f8ed02ac4 100644
--- a/types/progress.d.ts
+++ b/types/progress.d.ts
@@ -4,6 +4,9 @@
 
 import { AntdComponent } from './component';
 
+export type StringGradients = { [percentage: string]: string };
+type FromToGradients = { from: string; to: string };
+export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients);
 export declare class Progress extends AntdComponent {
   /**
    * template function of the content
@@ -60,13 +63,13 @@ export declare class Progress extends AntdComponent {
    * @default 'round'
    * @type Enum{ 'round', 'square' }
    */
-  strokeLinecap: 'round' | 'square';
+  strokeLinecap: 'butt' | 'square' | 'round';
 
   /**
    * color of progress bar
    * @type string
    */
-  strokeColor: string;
+  strokeColor: string | ProgressGradient;
 
   /**
    * segmented success percent, works when type="line"