diff --git a/components/progress/demo/circle-dynamic.md b/components/progress/demo/circle-dynamic.md
index 94751fbe50..aeee518cbf 100644
--- a/components/progress/demo/circle-dynamic.md
+++ b/components/progress/demo/circle-dynamic.md
@@ -15,24 +15,35 @@ var MyProgress = React.createClass({
       percent: 0
     };
   },
-  componentDidMount: function() {
-    var self = this;
-    setInterval(function() {
-      if (self.state.percent < 100) {
-        self.state.percent += 4;
-      }
-      self.setState({
-        percent: self.state.percent
-      });
-    }, 200);
+  increase() {
+    let percent = this.state.percent + 10;
+    if (percent > 100) {
+      percent = 100;
+    }
+    this.setState({ percent });
+  },
+  decline() {
+    let percent = this.state.percent - 10;
+    if (percent < 0) {
+      percent = 0;
+    }
+    this.setState({ percent });
   },
   render() {
-    return <ProgressCircle percent={this.state.percent} />;
+    return <div>
+      <ProgressCircle percent={this.state.percent} />
+      <div className="ant-btn-group">
+        <button className="ant-btn ant-btn-ghost" onClick={this.decline}>
+          <i className="anticon anticon-minus"></i>
+        </button>
+        <button className="ant-btn ant-btn-ghost" onClick={this.increase}>
+          <i className="anticon anticon-plus"></i>
+        </button>
+      </div>
+    </div>;
   }
 });
 
-React.render(
-  <MyProgress />
-  , document.getElementById('components-progress-demo-circle-dynamic'));
+React.render(<MyProgress />, document.getElementById('components-progress-demo-circle-dynamic'));
 ````
 
diff --git a/components/progress/demo/dynamic.md b/components/progress/demo/dynamic.md
index ee0b515f25..de65e97f74 100644
--- a/components/progress/demo/dynamic.md
+++ b/components/progress/demo/dynamic.md
@@ -15,24 +15,35 @@ var MyProgress = React.createClass({
       percent: 0
     };
   },
-  componentDidMount: function() {
-    var self = this;
-    setInterval(function() {
-      if (self.state.percent < 100) {
-        self.state.percent += 4;
-      }
-      self.setState({
-        percent: self.state.percent
-      });
-    }, 200);
+  increase() {
+    let percent = this.state.percent + 10;
+    if (percent > 100) {
+      percent = 100;
+    }
+    this.setState({ percent });
+  },
+  decline() {
+    let percent = this.state.percent - 10;
+    if (percent < 0) {
+      percent = 0;
+    }
+    this.setState({ percent });
   },
   render() {
-    return <Progress percent={this.state.percent} />;
+    return <div>
+      <Progress percent={this.state.percent} />
+      <div className="ant-btn-group">
+        <button className="ant-btn ant-btn-ghost" onClick={this.decline}>
+          <i className="anticon anticon-minus"></i>
+        </button>
+        <button className="ant-btn ant-btn-ghost" onClick={this.increase}>
+          <i className="anticon anticon-plus"></i>
+        </button>
+      </div>
+    </div>;
   }
 });
 
-React.render(
-  <MyProgress />
-  , document.getElementById('components-progress-demo-dynamic'));
+React.render(<MyProgress />, document.getElementById('components-progress-demo-dynamic'));
 ````
 
diff --git a/style/components/progress.less b/style/components/progress.less
index 9c8caa26e5..6bf0869ba8 100644
--- a/style/components/progress.less
+++ b/style/components/progress.less
@@ -27,7 +27,7 @@
   &-line-bg {
     border-radius: 100px;
     background-color: @primary-color;
-    transition: all 0.6s linear 0s;
+    transition: all 0.3s linear 0s;
   }
   &-line-text {
     position: absolute;