Progress 进度条

展示操作的当前进度。

何时使用

在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。

当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
当需要显示一个操作完成的百分比时。

API

参数	说明	类型	默认值
percent	百分比	number	0
status	状态，有两个值normal、exception	string	normal
strokeWidth	进度条线宽度，单位是进度条画布宽度的百分比	number	1
width	必填，进度条画布宽度，单位px。这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width	number	null

组件演示

var Progress = antd.Progress.Line;

React.render(
  <div>
    <Progress percent="30" />
    <Progress percent="70" status="exception" />
    <Progress percent="100" />
  </div>
  , document.getElementById('components-progress-demo-line'));

进度条

标准的进度条。

var Progress = antd.Progress.Line;

React.render(
  <div>
    <Progress percent="30" width="170" strokeWidth="3" />
    <Progress percent="70" width="170" strokeWidth="3" status="exception" />
    <Progress percent="100" width="170" strokeWidth="3" />
  </div>
  , document.getElementById('components-progress-demo-line-mini'));

小型进度条

适合放在较狭窄的区域内。

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'));

进度圈动态展示

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

var ProgressCircle = antd.Progress.Circle;

React.render(
  <div>
    <ProgressCircle percent="30" />
    <ProgressCircle percent="70" status="exception" />
    <ProgressCircle percent="100" />
  </div>
  , document.getElementById('components-progress-demo-circle'));

进度圈

圈形的进度。

var ProgressCircle = antd.Progress.Circle;

React.render(
  <div>
    <ProgressCircle percent="30" width="80" />
    <ProgressCircle percent="70" width="80" status="exception" />
    <ProgressCircle percent="100" width="80" />
  </div>
  , document.getElementById('components-progress-demo-circle-mini'));

小型进度圈

小一号的圈形进度。

var Progress = antd.Progress.Line;

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 <Progress percent={this.state.percent} />;
  }
});

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

动态展示

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