support Progress[strokeColor], close #10725

components/progress/demo/line.md

@@ -18,7 +18,7 @@ import { Progress } from 'antd';
 
 ReactDOM.render(
   <div>
-    <Progress percent={30} />
+    <Progress percent={30} strokeColor="red" />
     <Progress percent={50} status="active" />
     <Progress percent={70} status="exception" />
     <Progress percent={100} />

components/progress/index.en-US.md

@@ -25,6 +25,7 @@ If it will take a long time to complete an operation, you can use `Progress` to
 | status | to set the status of the Progress, options: `success` `exception` `active` | string | - |
 | strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | number | 10 |
 | strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | number | 6 |
+| strokeColor | color of progress bar | string | - |
 | 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

@@ -26,6 +26,7 @@ title: Progress
 | status | 状态，可选：`success` `exception` `active` | string | - |
 | strokeWidth `(type=line)` | 进度条线的宽度，单位 px | number | 10 |
 | strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
+| strokeColor | 进度条的色彩 | string | - |
 | type | 类型，可选 `line` `circle` `dashboard` | string | line |
 | width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 132 |
 | successPercent | 已完成的分段百分比，`type="line"` 时有效 | number | 0 |

components/progress/progress.tsx

@@ -23,6 +23,7 @@ export interface ProgressProps {
   status?: 'success' | 'active' | 'exception';
   showInfo?: boolean;
   strokeWidth?: number;
+  strokeColor?: string;
   trailColor?: string;
   width?: number;
   style?: React.CSSProperties;
@@ -60,6 +61,7 @@ export default class Progress extends React.Component<ProgressProps, {}> {
     percent: PropTypes.number,
     width: PropTypes.number,
     strokeWidth: PropTypes.number,
+    strokeColor: PropTypes.string,
     trailColor: PropTypes.string,
     format: PropTypes.func,
     gapDegree: PropTypes.number,
@@ -70,7 +72,8 @@ export default class Progress extends React.Component<ProgressProps, {}> {
     const props = this.props;
     const {
       prefixCls, className, percent = 0, status, format, trailColor, size, successPercent,
-      type, strokeWidth, width, showInfo, gapDegree = 0, gapPosition, ...restProps
+      type, strokeWidth, width, showInfo, gapDegree = 0, gapPosition, strokeColor,
+      ...restProps
     } = props;
     const progressStatus = parseInt((successPercent ? successPercent.toString() : percent.toString()), 10) >= 100 &&
     !('status' in props) ? 'success' : (status || 'normal');
@@ -95,6 +98,7 @@ export default class Progress extends React.Component<ProgressProps, {}> {
       const percentStyle = {
         width: `${validProgress(percent)}%`,
         height: strokeWidth || (size === 'small' ? 6 : 8),
+        background: strokeColor,
       };
       const successPercentStyle = {
         width: `${validProgress(successPercent)}%`,