update progress demo

components/progress/demo/circle-dynamic.md

@@ -15,24 +15,35 @@ var MyProgress = React.createClass({
       percent: 0
     };
   },
-  componentDidMount: function() {
+  increase() {
-    var self = this;
+    let percent = this.state.percent + 10;
-    setInterval(function() {
+    if (percent > 100) {
-      if (self.state.percent < 100) {
+      percent = 100;
-        self.state.percent += 4;
+    }
-      }
+    this.setState({ percent });
-      self.setState({
+  },
-        percent: self.state.percent
+  decline() {
-      });
+    let percent = this.state.percent - 10;
-    }, 200);
+    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(
+React.render(<MyProgress />, document.getElementById('components-progress-demo-circle-dynamic'));
-  <MyProgress />
-  , document.getElementById('components-progress-demo-circle-dynamic'));
 ````
 

components/progress/demo/dynamic.md

@@ -15,24 +15,35 @@ var MyProgress = React.createClass({
       percent: 0
     };
   },
-  componentDidMount: function() {
+  increase() {
-    var self = this;
+    let percent = this.state.percent + 10;
-    setInterval(function() {
+    if (percent > 100) {
-      if (self.state.percent < 100) {
+      percent = 100;
-        self.state.percent += 4;
+    }
-      }
+    this.setState({ percent });
-      self.setState({
+  },
-        percent: self.state.percent
+  decline() {
-      });
+    let percent = this.state.percent - 10;
-    }, 200);
+    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(
+React.render(<MyProgress />, document.getElementById('components-progress-demo-dynamic'));
-  <MyProgress />
-  , document.getElementById('components-progress-demo-dynamic'));
 ````
 

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;