diff --git a/components/progress/Steps.tsx b/components/progress/Steps.tsx
index b1b90cd211..4f563cffe5 100644
--- a/components/progress/Steps.tsx
+++ b/components/progress/Steps.tsx
@@ -1,34 +1,36 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import { ProgressProps, ProgressSize } from './progress';
 
 interface StepsProps extends ProgressProps {
   steps: number;
   size?: ProgressSize;
+  strokeColor?: string;
 }
 
 const Steps: React.FC<StepsProps> = props => {
   const { size, steps, percent = 0, strokeWidth = 8, strokeColor, prefixCls, children } = props;
-  const getStyledSteps = () => {
-    const current = Math.floor(steps * (percent / 100));
-    const stepWidth = size === 'small' ? 2 : 14;
-    const styleSteps = [];
-    for (let i = 0; i < steps; i++) {
-      let color;
-      if (i <= current - 1) {
-        color = strokeColor;
-      }
-      const stepStyle = {
-        backgroundColor: `${color}`,
-        width: `${stepWidth}px`,
-        height: `${strokeWidth}px`,
-      };
-      styleSteps.push(<div key={i} className={`${prefixCls}-steps-item`} style={stepStyle} />);
-    }
-    return styleSteps;
-  };
+  const current = Math.floor(steps * (percent / 100));
+  const stepWidth = size === 'small' ? 2 : 14;
+  const styledSteps = [];
+  for (let i = 0; i < steps; i += 1) {
+    styledSteps.push(
+      <div
+        key={i}
+        className={classNames(`${prefixCls}-steps-item`, {
+          [`${prefixCls}-steps-item-active`]: i <= current - 1,
+        })}
+        style={{
+          backgroundColor: i <= current - 1 ? strokeColor : undefined,
+          width: stepWidth,
+          height: strokeWidth,
+        }}
+      />,
+    );
+  }
   return (
     <div className={`${prefixCls}-steps-outer`}>
-      {getStyledSteps()}
+      {styledSteps}
       {children}
     </div>
   );
diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap
index 898a2e3459..5452f45d9e 100644
--- a/components/progress/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap
@@ -1424,16 +1424,16 @@ Array [
       class="ant-progress-steps-outer"
     >
       <div
-        class="ant-progress-steps-item"
-        style="background-color:#1890ff;width:14px;height:8px"
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="width:14px;height:8px"
       />
       <div
         class="ant-progress-steps-item"
-        style="background-color:undefined;width:14px;height:8px"
+        style="width:14px;height:8px"
       />
       <div
         class="ant-progress-steps-item"
-        style="background-color:undefined;width:14px;height:8px"
+        style="width:14px;height:8px"
       />
       <span
         class="ant-progress-text"
@@ -1451,24 +1451,24 @@ Array [
       class="ant-progress-steps-outer"
     >
       <div
-        class="ant-progress-steps-item"
-        style="background-color:#1890ff;width:14px;height:8px"
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="width:14px;height:8px"
       />
       <div
         class="ant-progress-steps-item"
-        style="background-color:undefined;width:14px;height:8px"
+        style="width:14px;height:8px"
       />
       <div
         class="ant-progress-steps-item"
-        style="background-color:undefined;width:14px;height:8px"
+        style="width:14px;height:8px"
       />
       <div
         class="ant-progress-steps-item"
-        style="background-color:undefined;width:14px;height:8px"
+        style="width:14px;height:8px"
       />
       <div
         class="ant-progress-steps-item"
-        style="background-color:undefined;width:14px;height:8px"
+        style="width:14px;height:8px"
       />
       <span
         class="ant-progress-text"
@@ -1486,24 +1486,24 @@ Array [
       class="ant-progress-steps-outer"
     >
       <div
-        class="ant-progress-steps-item"
-        style="background-color:#1890ff;width:2px;height:8px"
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="background-color:#52c41a;width:2px;height:8px"
       />
       <div
-        class="ant-progress-steps-item"
-        style="background-color:#1890ff;width:2px;height:8px"
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="background-color:#52c41a;width:2px;height:8px"
       />
       <div
-        class="ant-progress-steps-item"
-        style="background-color:#1890ff;width:2px;height:8px"
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="background-color:#52c41a;width:2px;height:8px"
       />
       <div
-        class="ant-progress-steps-item"
-        style="background-color:#1890ff;width:2px;height:8px"
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="background-color:#52c41a;width:2px;height:8px"
       />
       <div
-        class="ant-progress-steps-item"
-        style="background-color:#1890ff;width:2px;height:8px"
+        class="ant-progress-steps-item ant-progress-steps-item-active"
+        style="background-color:#52c41a;width:2px;height:8px"
       />
       <span
         class="ant-progress-text"
diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap
index 465ae612c5..9f2a41170a 100644
--- a/components/progress/__tests__/__snapshots__/index.test.js.snap
+++ b/components/progress/__tests__/__snapshots__/index.test.js.snap
@@ -560,15 +560,15 @@ exports[`Progress should support steps 1`] = `
   >
     <div
       class="ant-progress-steps-item"
-      style="background-color:undefined;width:14px;height:8px"
+      style="width:14px;height:8px"
     />
     <div
       class="ant-progress-steps-item"
-      style="background-color:undefined;width:14px;height:8px"
+      style="width:14px;height:8px"
     />
     <div
       class="ant-progress-steps-item"
-      style="background-color:undefined;width:14px;height:8px"
+      style="width:14px;height:8px"
     />
     <span
       class="ant-progress-text"
diff --git a/components/progress/__tests__/index.test.js b/components/progress/__tests__/index.test.js
index 166228e94d..3a6e0c4181 100644
--- a/components/progress/__tests__/index.test.js
+++ b/components/progress/__tests__/index.test.js
@@ -138,4 +138,25 @@ describe('Progress', () => {
     const wrapper = mount(<Progress steps={3} />);
     expect(wrapper).toMatchRenderedSnapshot();
   });
+
+  it('steps should be changable', () => {
+    const wrapper = mount(<Progress steps={5} percent={60} />);
+    expect(wrapper.find('.ant-progress-steps-item-active').length).toBe(3);
+    wrapper.setProps({ percent: 40 });
+    expect(wrapper.find('.ant-progress-steps-item-active').length).toBe(2);
+  });
+
+  it('steps should be changable when has strokeColor', () => {
+    const wrapper = mount(<Progress steps={5} percent={60} strokeColor="#1890ff" />);
+    expect(wrapper.find('.ant-progress-steps-item').at(0).getDOMNode().style.backgroundColor).toBe(
+      'rgb(24, 144, 255)',
+    );
+    wrapper.setProps({ percent: 40 });
+    expect(wrapper.find('.ant-progress-steps-item').at(2).getDOMNode().style.backgroundColor).toBe(
+      '',
+    );
+    expect(wrapper.find('.ant-progress-steps-item').at(1).getDOMNode().style.backgroundColor).toBe(
+      'rgb(24, 144, 255)',
+    );
+  });
 });
diff --git a/components/progress/demo/steps.md b/components/progress/demo/steps.md
index 2d49b42814..e2cb6c2a1c 100644
--- a/components/progress/demo/steps.md
+++ b/components/progress/demo/steps.md
@@ -18,11 +18,11 @@ import { Progress } from 'antd';
 
 ReactDOM.render(
   <>
-    <Progress percent={50} steps={3} strokeColor="#1890ff" />
+    <Progress percent={50} steps={3} />
     <br />
-    <Progress percent={30} steps={5} strokeColor="#1890ff" />
+    <Progress percent={30} steps={5} />
     <br />
-    <Progress percent={100} steps={5} size="small" strokeColor="#1890ff" />
+    <Progress percent={100} steps={5} size="small" strokeColor="#52c41a" />
   </>,
   mountNode,
 );
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
index c5b57651b5..4382b75045 100644
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@@ -99,6 +99,7 @@ export default class Progress extends React.Component<ProgressProps> {
       type,
       steps,
       showInfo,
+      strokeColor,
       ...restProps
     } = props;
     const prefixCls = getPrefixCls('progress', customizePrefixCls);
@@ -108,7 +109,12 @@ export default class Progress extends React.Component<ProgressProps> {
     // Render progress shape
     if (type === 'line') {
       progress = steps ? (
-        <Steps {...this.props} prefixCls={prefixCls} steps={steps}>
+        <Steps
+          {...this.props}
+          strokeColor={typeof strokeColor === 'string' ? strokeColor : undefined}
+          prefixCls={prefixCls}
+          steps={steps}
+        >
           {progressInfo}
         </Steps>
       ) : (
diff --git a/components/progress/style/index.less b/components/progress/style/index.less
index c0c95e724f..338d8d633c 100644
--- a/components/progress/style/index.less
+++ b/components/progress/style/index.less
@@ -26,6 +26,11 @@
       min-width: 2px;
       margin-right: 2px;
       background: @progress-steps-item-bg;
+      transition: all 0.3s;
+
+      &-active {
+        background: @progress-default-color;
+      }
     }
   }