ant-design/components/progress/demo/dynamic.html

<div class="code-box">
  <div class="code-box-demo">
    <div id="components-progress-demo-dynamic"></div>
    <script>(function(){'use strict';

var Progress = antd.Progress.Line;

var MyProgress = React.createClass({
  displayName: 'MyProgress',

  getInitialState: function getInitialState() {
    return {
      percent: 0
    };
  },
  componentDidMount: function componentDidMount() {
    var self = this;
    setInterval(function () {
      if (self.state.percent < 100) {
        self.state.percent += 4;
      }
      self.setState({
        percent: self.state.percent
      });
    }, 200);
  },
  render: function render() {
    return React.createElement(Progress, { percent: this.state.percent });
  }
});

React.render(React.createElement(MyProgress, null), document.getElementById('components-progress-demo-dynamic'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> Progress = antd.Progress.Line;

<span class="keyword">var</span> MyProgress = React.createClass({
  getInitialState() {
    <span class="keyword">return</span> {
      percent: <span class="number">0</span>
    };
  },
  componentDidMount: <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
    <span class="keyword">var</span> self = <span class="keyword">this</span>;
    setInterval(<span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
      <span class="keyword">if</span> (self.state.percent &lt; <span class="number">100</span>) {
        self.state.percent += <span class="number">4</span>;
      }
      self.setState({
        percent: self.state.percent
      });
    }, <span class="number">200</span>);
  },
  render() {
    <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="title">Progress</span> <span class="attribute">percent</span>=<span class="value">{this.state.percent}</span> /&gt;</span>;</span>
  }
});

React.render(
  <span class="xml"><span class="tag">&lt;<span class="title">MyProgress</span> /&gt;</span>
  , document.getElementById('components-progress-demo-dynamic'));</span></code></pre></div>
  </div>
  <div class="code-box-meta markdown">
    <div class="code-box-title">动态展示</div>
    <p>会动的进度条才是好进度条。</p>
    <span class="collapse anticon anticon-circle-o-right"></span>
  </div>
</div>