Add successPercent for progress

components/progress/__tests__/__snapshots__/demo.test.js.snap

@@ -720,3 +720,33 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
+<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:60%;height:8px"
+        />
+        <div
+          class="ant-progress-success-bg"
+          style="width:30%;height:8px"
+        />
+      </div>
+    </div>
+    <span
+      class="ant-progress-text"
+    >
+      60%
+    </span>
+  </div>
+</div>
+`;

components/progress/demo/segment.md

@@ -0,0 +1,24 @@
+---
+order: 9
+title:
+  zh-CN: 分段进度条
+  en-US: Progress bar with success segment
+---
+
+## zh-CN
+
+标准的进度条。
+
+## en-US
+
+A standard progress bar.
+
+````jsx
+import { Tooltip, Progress } from 'antd';
+
+ReactDOM.render(
+  <Tooltip title="3 done / 3 in progress / 4 to do">
+    <Progress percent={60} successPercent={30} />
+  </Tooltip>
+, mountNode);
+````

components/progress/index.en-US.md

@@ -27,3 +27,4 @@ If it will take a long time to complete an operation, you can use `Progress` to
 | strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | number | 6 |
 | type | to set the type, options: `line` `circle` `dashboard` | string | `line` |
 | width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | number | 132 |
+| successPercent | segmented success percent, works when `type="line"` | number | 0 |

components/progress/index.zh-CN.md

@@ -28,3 +28,4 @@ title: Progress
 | strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
 | type | 类型，可选 `line` `circle` `dashboard` | string | line |
 | width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 132 |
+| successPercent | 已完成的分段百分比，`type="line"` 时有效 | number | 0 |

components/progress/progress.tsx

@@ -15,6 +15,7 @@ export interface ProgressProps {
   className?: string;
   type?: 'line' | 'circle' | 'dashboard';
   percent?: number;
+  successPercent?: number;
   format?: (percent: number) => string;
   status?: 'success' | 'active' | 'exception';
   showInfo?: boolean;
@@ -56,7 +57,7 @@ export default class Progress extends React.Component<ProgressProps, {}> {
   render() {
     const props = this.props;
     const {
-      prefixCls, className, percent = 0, status, format, trailColor, size,
+      prefixCls, className, percent = 0, status, format, trailColor, size, successPercent,
       type, strokeWidth, width, showInfo, gapDegree = 0, gapPosition, ...restProps,
     } = props;
     const progressStatus = parseInt(percent.toString(), 10) >= 100 && !('status' in props) ?
@@ -83,11 +84,19 @@ export default class Progress extends React.Component<ProgressProps, {}> {
         width: `${percent}%`,
         height: strokeWidth || (size === 'small' ? 6 : 8),
       };
+      const successPercentStyle = {
+        width: `${successPercent}%`,
+        height: strokeWidth || (size === 'small' ? 6 : 8),
+      };
+      const successSegment = successPercent !== undefined
+        ? <div className={`${prefixCls}-success-bg`} style={successPercentStyle} />
+        : null;
       progress = (
         <div>
           <div className={`${prefixCls}-outer`}>
             <div className={`${prefixCls}-inner`}>
               <div className={`${prefixCls}-bg`} style={percentStyle} />
+              {successSegment}
             </div>
           </div>
           {progressInfo}

components/progress/style/index.less

@@ -35,6 +35,7 @@
     background-color: @progress-remaining-color;
     border-radius: 100px;
     vertical-align: middle;
+    position: relative;
   }
 
   &-circle-trail {
@@ -46,6 +47,7 @@
     animation: ~"@{ant-prefix}-progress-appear" .3s;
   }
 
+  &-success-bg,
   &-bg {
     border-radius: 100px;
     background-color: @progress-default-color;
@@ -53,6 +55,13 @@
     position: relative;
   }
 
+  &-success-bg {
+    background-color: @success-color;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
   &-text {
     word-break: normal;
     width: 2em;