progress all support successPercent (#14412)

close #14332
2024-11-24 02:59:58 +08:00 · 2019-01-18 15:19:36 +08:00 · 2019-01-18 15:19:36 +08:00 · 283187761a
commit 283187761a
parent 8c5683d316
10 changed files with 330 additions and 121 deletions
--- a/components/progress/Circle.tsx
+++ b/components/progress/Circle.tsx
@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Circle as RCCircle } from 'rc-progress';
+import { validProgress } from './utils';
+import { ProgressProps } from './progress';
+
+interface CircleProps extends ProgressProps {
+  prefixCls: string;
+  children: React.ReactNode;
+  progressStatus: string;
+}
+
+const statusColorMap: Record<string, string> = {
+  normal: '#108ee9',
+  exception: '#ff5500',
+  success: '#87d068',
+};
+
+function getPercentage({ percent, successPercent }: CircleProps) {
+  const ptg = validProgress(percent);
+  if (!successPercent) return ptg;
+
+  const successPtg = validProgress(successPercent);
+  return [successPercent, validProgress(ptg - successPtg)];
+}
+
+function getStrokeColor({ progressStatus, successPercent, strokeColor }: CircleProps) {
+  const color = strokeColor || statusColorMap[progressStatus];
+  if (!successPercent) return color;
+  return [statusColorMap.success, color];
+}
+
+const Circle: React.SFC<CircleProps> = props => {
+  const {
+    prefixCls,
+    width,
+    strokeWidth,
+    trailColor,
+    strokeLinecap,
+    gapPosition,
+    gapDegree,
+    type,
+    children,
+  } = props;
+  const circleSize = width || 120;
+  const circleStyle = {
+    width: circleSize,
+    height: circleSize,
+    fontSize: circleSize * 0.15 + 6,
+  };
+  const circleWidth = strokeWidth || 6;
+  const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
+  const gapDeg = gapDegree || (type === 'dashboard' && 75);
+
+  return (
+    <div className={`${prefixCls}-inner`} style={circleStyle}>
+      <RCCircle
+        percent={getPercentage(props)}
+        strokeWidth={circleWidth}
+        trailWidth={circleWidth}
+        strokeColor={getStrokeColor(props)}
+        strokeLinecap={strokeLinecap}
+        trailColor={trailColor}
+        prefixCls={prefixCls}
+        gapDegree={gapDeg}
+        gapPosition={gapPos}
+      />
+      {children}
+    </div>
+  );
+};
+
+export default Circle;
--- a/components/progress/Line.tsx
+++ b/components/progress/Line.tsx
@ -0,0 +1,49 @@
+import * as React from 'react';
+import { validProgress } from './utils';
+import { ProgressProps } from './progress';
+
+interface LineProps extends ProgressProps {
+  prefixCls: string;
+  children: React.ReactNode;
+}
+
+const Line: React.SFC<LineProps> = props => {
+  const {
+    prefixCls,
+    percent,
+    successPercent,
+    strokeWidth,
+    size,
+    strokeColor,
+    strokeLinecap,
+    children,
+  } = props;
+  const percentStyle = {
+    width: `${validProgress(percent)}%`,
+    height: strokeWidth || (size === 'small' ? 6 : 8),
+    background: strokeColor,
+    borderRadius: strokeLinecap === 'square' ? 0 : '100px',
+  };
+  const successPercentStyle = {
+    width: `${validProgress(successPercent)}%`,
+    height: strokeWidth || (size === 'small' ? 6 : 8),
+    borderRadius: strokeLinecap === 'square' ? 0 : '100px',
+  };
+  const successSegment =
+    successPercent !== undefined ? (
+      <div className={`${prefixCls}-success-bg`} style={successPercentStyle} />
+    ) : null;
+  return (
+    <div>
+      <div className={`${prefixCls}-outer`}>
+        <div className={`${prefixCls}-inner`}>
+          <div className={`${prefixCls}-bg`} style={percentStyle} />
+          {successSegment}
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default Line;
--- a/components/progress/tests/snapshots/demo.test.js.snap
+++ b/components/progress/tests/snapshots/demo.test.js.snap
@ -20,8 +20,9 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
     a 47,47 0 1 1 0,-94"
          fill-opacity="0"
          stroke="#f3f3f3"
+          stroke-linecap="round"
          stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+          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
          class="ant-progress-circle-path"
@ -60,8 +61,9 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
     a 47,47 0 1 1 0,-94"
          fill-opacity="0"
          stroke="#f3f3f3"
+          stroke-linecap="round"
          stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+          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
          class="ant-progress-circle-path"
@ -116,8 +118,9 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
     a 47,47 0 1 1 0,-94"
          fill-opacity="0"
          stroke="#f3f3f3"
+          stroke-linecap="round"
          stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+          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
          class="ant-progress-circle-path"
@ -177,8 +180,9 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
     a 47,47 0 1 1 0,-94"
          fill-opacity="0"
          stroke="#f3f3f3"
+          stroke-linecap="round"
          stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+          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
          class="ant-progress-circle-path"
@ -272,8 +276,9 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
     a 47,47 0 1 1 0,-94"
          fill-opacity="0"
          stroke="#f3f3f3"
+          stroke-linecap="round"
          stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+          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
          class="ant-progress-circle-path"
@ -312,8 +317,9 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
     a 47,47 0 1 1 0,-94"
          fill-opacity="0"
          stroke="#f3f3f3"
+          stroke-linecap="round"
          stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+          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
          class="ant-progress-circle-path"
@ -368,8 +374,9 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
     a 47,47 0 1 1 0,-94"
          fill-opacity="0"
          stroke="#f3f3f3"
+          stroke-linecap="round"
          stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+          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
          class="ant-progress-circle-path"
@ -428,8 +435,9 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
     a 47,47 0 1 1 0,94"
        fill-opacity="0"
        stroke="#f3f3f3"
+        stroke-linecap="round"
        stroke-width="6"
-        style="stroke-dasharray:220.30970943744057px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+        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
        class="ant-progress-circle-path"
@ -551,8 +559,9 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
     a 47,47 0 1 1 0,-94"
          fill-opacity="0"
          stroke="#f3f3f3"
+          stroke-linecap="round"
          stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+          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
          class="ant-progress-circle-path"
@ -591,8 +600,9 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
     a 47,47 0 1 1 0,-94"
          fill-opacity="0"
          stroke="#f3f3f3"
+          stroke-linecap="round"
          stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+          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
          class="ant-progress-circle-path"
@ -946,8 +956,9 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
     a 47,47 0 1 1 0,-94"
          fill-opacity="0"
          stroke="#f3f3f3"
+          stroke-linecap="square"
          stroke-width="6"
-          style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+          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
          class="ant-progress-circle-path"
@ -986,8 +997,9 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
     a 47,47 0 1 1 0,94"
          fill-opacity="0"
          stroke="#f3f3f3"
+          stroke-linecap="square"
          stroke-width="6"
-          style="stroke-dasharray:220.30970943744057px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+          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
          class="ant-progress-circle-path"
@ -1012,32 +1024,136 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
 `;

 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>
+  <div
+    class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
+  >
+    <div>
      <div
-        class="ant-progress-inner"
+        class="ant-progress-outer"
      >
        <div
-          class="ant-progress-bg"
-          style="width:60%;height:8px;border-radius:100px"
-        />
-        <div
-          class="ant-progress-success-bg"
-          style="width:30%;height:8px;border-radius:100px"
-        />
+          class="ant-progress-inner"
+        >
+          <div
+            class="ant-progress-bg"
+            style="width:60%;height:8px;border-radius:100px"
+          />
+          <div
+            class="ant-progress-success-bg"
+            style="width:30%;height:8px;border-radius:100px"
+          />
+        </div>
      </div>
+      <span
+        class="ant-progress-text"
+        title="60%"
+      >
+        60%
+      </span>
    </div>
-    <span
-      class="ant-progress-text"
-      title="60%"
+  </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:24px"
    >
-      60%
-    </span>
+      <svg
+        class="ant-progress-circle "
+        viewBox="0 0 100 100"
+      >
+        <path
+          class="ant-progress-circle-trail"
+          d="M 50,50 m 0,-47
+     a 47,47 0 1 1 0,94
+     a 47,47 0 1 1 0,-94"
+          fill-opacity="0"
+          stroke="#f3f3f3"
+          stroke-linecap="round"
+          stroke-width="6"
+          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
+          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"
+          fill-opacity="0"
+          stroke-linecap="round"
+          stroke-width="6"
+          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
+          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"
+          fill-opacity="0"
+          stroke-linecap="round"
+          stroke-width="6"
+          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"
+        />
+      </svg>
+      <span
+        class="ant-progress-text"
+        title="60%"
+      >
+        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:24px"
+    >
+      <svg
+        class="ant-progress-circle "
+        viewBox="0 0 100 100"
+      >
+        <path
+          class="ant-progress-circle-trail"
+          d="M 50,50 m 0,47
+     a 47,47 0 1 1 0,-94
+     a 47,47 0 1 1 0,94"
+          fill-opacity="0"
+          stroke="#f3f3f3"
+          stroke-linecap="round"
+          stroke-width="6"
+          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
+          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"
+          fill-opacity="0"
+          stroke-linecap="round"
+          stroke-width="6"
+          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
+          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"
+          fill-opacity="0"
+          stroke-linecap="round"
+          stroke-width="6"
+          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"
+        />
+      </svg>
+      <span
+        class="ant-progress-text"
+        title="60%"
+      >
+        60%
+      </span>
+    </div>
  </div>
 </div>
 `;
--- a/components/progress/tests/snapshots/index.test.js.snap
+++ b/components/progress/tests/snapshots/index.test.js.snap
@ -221,8 +221,9 @@ exports[`Progress render strokeColor 1`] = `
     a 47,47 0 1 1 0,-94"
        fill-opacity="0"
        stroke="#f3f3f3"
+        stroke-linecap="round"
        stroke-width="6"
-        style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"
+        style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px;"
      />
      <path
        class="ant-progress-circle-path"
--- a/components/progress/demo/segment.md
+++ b/components/progress/demo/segment.md
@ -17,9 +17,19 @@ A standard progress bar.
 import { Tooltip, Progress } from 'antd';

 ReactDOM.render(
-  <Tooltip title="3 done / 3 in progress / 4 to do">
-    <Progress percent={60} successPercent={30} />
-  </Tooltip>,
+  <div>
+    <Tooltip title="3 done / 3 in progress / 4 to do">
+      <Progress percent={60} successPercent={30} />
+    </Tooltip>
+
+    <Tooltip title="3 done / 3 in progress / 4 to do">
+      <Progress percent={60} successPercent={30} type="circle" />
+    </Tooltip>
+
+    <Tooltip title="3 done / 3 in progress / 4 to do">
+      <Progress percent={60} successPercent={30} type="dashboard" />
+    </Tooltip>
+  </div>,
  mountNode
 );
 ````
--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@ -27,6 +27,6 @@ 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 |
 | strokeLinecap | to set the style of the progress linecap | Enum{ 'round', 'square' } | `round` |
 | strokeColor | color of progress bar | string | - |
-| successPercent | segmented success percent, works when `type="line"` | number | 0 |
+| successPercent | segmented success percent | number | 0 |
 | 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 |
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@ -28,6 +28,6 @@ title: Progress
 | strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
 | strokeLinecap | | Enum{ 'round', 'square' } | `round` |
 | strokeColor | 进度条的色彩 | string | - |
-| successPercent | 已完成的分段百分比，`type="line"` 时有效 | number | 0 |
+| successPercent | 已完成的分段百分比 | number | 0 |
 | type | 类型，可选 `line` `circle` `dashboard` | string | line |
 | width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 132 |
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@ -1,16 +1,12 @@
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
-import Icon from '../icon';
-import { Circle } from 'rc-progress';
 import classNames from 'classnames';
+import Icon from '../icon';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import { tuple } from '../_util/type';
-
-const statusColorMap: Record<string, string> = {
-  normal: '#108ee9',
-  exception: '#ff5500',
-  success: '#87d068',
-};
+import Line from './Line';
+import Circle from './Circle';
+import { validProgress } from './utils';

 const ProgressTypes = tuple('line', 'circle', 'dashboard');
 export type ProgressType = (typeof ProgressTypes)[number];
@ -37,22 +33,15 @@ export interface ProgressProps {
  size?: ProgressSize;
 }

-const validProgress = (progress: number | undefined) => {
-  if (!progress || progress < 0) {
-    return 0;
-  } else if (progress > 100) {
-    return 100;
-  }
-  return progress;
-};
-
 export default class Progress extends React.Component<ProgressProps, {}> {
  static defaultProps = {
-    type: 'line' as ProgressProps['type'],
+    type: 'line',
    percent: 0,
    showInfo: true,
    trailColor: '#f3f3f3',
-    size: 'default' as ProgressSize,
+    size: 'default',
+    gapDegree: 0,
+    strokeLinecap: 'round',
  };

  static propTypes = {
@ -70,6 +59,27 @@ export default class Progress extends React.Component<ProgressProps, {}> {
    default: PropTypes.oneOf(['default', 'small']),
  };

+  renderProcessInfo(prefixCls: string, progressStatus: (typeof ProgressStatuses)[number]) {
+    const { showInfo, format, type, percent, successPercent } = this.props;
+    if (!showInfo) return null;
+
+    let text;
+    const textFormatter = format || (percentNumber => `${percentNumber}%`);
+    const iconType = type === 'circle' || type === 'dashboard' ? '' : '-circle';
+    if (format || (progressStatus !== 'exception' && progressStatus !== 'success')) {
+      text = textFormatter(validProgress(percent), validProgress(successPercent));
+    } else if (progressStatus === 'exception') {
+      text = <Icon type={`close${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
+    } else if (progressStatus === 'success') {
+      text = <Icon type={`check${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
+    }
+    return (
+      <span className={`${prefixCls}-text`} title={typeof text === 'string' ? text : undefined}>
+        {text}
+      </span>
+    );
+  }
+
  renderProgress = ({ getPrefixCls }: ConfigConsumerProps) => {
    const props = this.props;
    const {
@ -97,79 +107,22 @@ export default class Progress extends React.Component<ProgressProps, {}> {
      !('status' in props)
        ? 'success'
        : status || 'normal';
-    let progressInfo;
    let progress;
-    const textFormatter = format || (percentNumber => `${percentNumber}%`);

-    if (showInfo) {
-      let text;
-      const iconType = type === 'circle' || type === 'dashboard' ? '' : '-circle';
-      if (format || (progressStatus !== 'exception' && progressStatus !== 'success')) {
-        text = textFormatter(validProgress(percent), validProgress(successPercent));
-      } else if (progressStatus === 'exception') {
-        text = <Icon type={`close${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
-      } else if (progressStatus === 'success') {
-        text = <Icon type={`check${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;
-      }
-      progressInfo = (
-        <span className={`${prefixCls}-text`} title={typeof text === 'string' ? text : undefined}>
-          {text}
-        </span>
-      );
-    }
+    const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);

+    // Render progress shape
    if (type === 'line') {
-      const percentStyle = {
-        width: `${validProgress(percent)}%`,
-        height: strokeWidth || (size === 'small' ? 6 : 8),
-        background: strokeColor,
-        borderRadius: strokeLinecap === 'square' ? 0 : '100px',
-      };
-      const successPercentStyle = {
-        width: `${validProgress(successPercent)}%`,
-        height: strokeWidth || (size === 'small' ? 6 : 8),
-        borderRadius: strokeLinecap === 'square' ? 0 : '100px',
-      };
-      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>
+        <Line {...this.props} prefixCls={prefixCls}>
          {progressInfo}
-        </div>
+        </Line>
      );
    } else if (type === 'circle' || type === 'dashboard') {
-      const circleSize = width || 120;
-      const circleStyle = {
-        width: circleSize,
-        height: circleSize,
-        fontSize: circleSize * 0.15 + 6,
-      };
-      const circleWidth = strokeWidth || 6;
-      const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
-      const gapDeg = gapDegree || (type === 'dashboard' && 75);
      progress = (
-        <div className={`${prefixCls}-inner`} style={circleStyle}>
-          <Circle
-            percent={validProgress(percent)}
-            strokeWidth={circleWidth}
-            trailWidth={circleWidth}
-            strokeColor={strokeColor || statusColorMap[progressStatus]}
-            strokeLinecap={strokeLinecap}
-            trailColor={trailColor}
-            prefixCls={prefixCls}
-            gapDegree={gapDeg}
-            gapPosition={gapPos}
-          />
+        <Circle {...this.props} prefixCls={prefixCls} progressStatus={progressStatus}>
          {progressInfo}
-        </div>
+        </Circle>
      );
    }

--- a/components/progress/utils.ts
+++ b/components/progress/utils.ts
@ -0,0 +1,8 @@
+export function validProgress(progress: number | undefined) {
+  if (!progress || progress < 0) {
+    return 0;
+  } else if (progress > 100) {
+    return 100;
+  }
+  return progress;
+};
--- a/package.json
+++ b/package.json
@ -68,7 +68,7 @@
    "rc-menu": "~7.4.12",
    "rc-notification": "~3.3.0",
    "rc-pagination": "~1.17.7",
-    "rc-progress": "~2.2.6",
+    "rc-progress": "~2.3.0",
    "rc-rate": "~2.5.0",
    "rc-select": "^8.6.7",
    "rc-slider": "~8.6.3",