ant-design/components/progress/demo/circle-dynamic.md
2015-06-16 21:24:09 +08:00

677 B

进度圈动态展示

  • order: 4

会动的进度条才是好进度条。


var ProgressCircle = antd.Progress.Circle;

var MyProgress = React.createClass({
  getInitialState() {
    return {
      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);
  },
  render() {
    return <ProgressCircle percent={this.state.percent} />;
  }
});

React.render(
  <MyProgress />
  , document.getElementById('components-progress-demo-circle-dynamic'));