Progress 进度条

展示操作的当前进度。

何时使用#

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

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

API#

Progress Line#

参数 说明 类型 默认值
percent 百分比 number 0
format 内容的模板函数 function(percent)
status 状态,可选:normal、exception、active string normal
strokeWidth 进度条线的宽度,单位是px number 1
showInfo 是否显示进度数值和状态图标 bool true

Progress Circle#

参数 说明 类型 默认值
percent 百分比 number 0
format 内容的模板函数 function(percent)
status 状态,可选:normal、exception string normal
strokeWidth 进度条线的宽度,单位是进度条画布宽度的百分比 number 1
width 必填,进度条画布宽度,单位px。这里没有提供height属性设置,Line型高度就是strokeWidth,Circle型高度等于width number null

代码演示

import { Progress } from 'antd';
const ProgressLine = Progress.Line;

ReactDOM.render(
  <div>
    <ProgressLine percent={30} />
    <ProgressLine percent={50} status="active" />
    <ProgressLine percent={70} status="exception" />
    <ProgressLine percent={100} />
    <ProgressLine percent={50} showInfo={false} />
  </div>
, mountNode);

标准的进度条。

import { Progress } from 'antd';
const ProgressLine = Progress.Line;

ReactDOM.render(
  <div style={{ width: 170 }}>
    <ProgressLine percent={30} strokeWidth={5} />
    <ProgressLine percent={50} strokeWidth={5} status="active" />
    <ProgressLine percent={70} strokeWidth={5} status="exception" />
    <ProgressLine percent={100} strokeWidth={5} />
  </div>
, mountNode);

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

import { Progress, Button, Icon } from 'antd';
const ProgressCircle = Progress.Circle;
const ButtonGroup = Button.Group;

const MyProgress = React.createClass({
  getInitialState() {
    return {
      percent: 0
    };
  },
  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 (
      <div>
        <ProgressCircle percent={this.state.percent} />
        <ButtonGroup>
          <Button type="ghost" onClick={this.decline}>
            <Icon type="minus" />
          </Button>
          <Button type="ghost" onClick={this.increase}>
            <Icon type="plus" />
          </Button>
        </ButtonGroup>
      </div>
    );
  }
});

ReactDOM.render(<MyProgress />, mountNode);

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

import { Progress } from 'antd';
const ProgressCircle = Progress.Circle;

ReactDOM.render(
  <div>
    <ProgressCircle percent={75} format={percent => `${percent / 10.0}折` } />
    <ProgressCircle percent={100} format={() => '成功'} />
  </div>
  , mountNode);

format 属性指定格式。

import { Progress } from 'antd';
const ProgressCircle = Progress.Circle;

ReactDOM.render(
  <div>
    <ProgressCircle percent={75} />
    <ProgressCircle percent={70} status="exception" />
    <ProgressCircle percent={100} />
  </div>
  , mountNode);

圈形的进度。

import { Progress } from 'antd';
const ProgressCircle = Progress.Circle;

ReactDOM.render(
  <div>
    <ProgressCircle percent={30} width={80} />
    <ProgressCircle percent={70} width={80} status="exception" />
    <ProgressCircle percent={100} width={80} />
  </div>
  , mountNode);

小一号的圈形进度。

import { Progress, Button, Icon } from 'antd';
const ProgressLine = Progress.Line;
const ButtonGroup = Button.Group;

const MyProgress = React.createClass({
  getInitialState() {
    return {
      percent: 0
    };
  },
  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 (
      <div>
        <ProgressLine percent={this.state.percent} />
        <ButtonGroup>
          <Button type="ghost" onClick={this.decline}>
            <Icon type="minus" />
          </Button>
          <Button type="ghost" onClick={this.increase}>
            <Icon type="plus" />
          </Button>
        </ButtonGroup>
      </div>
    );
  }
});

ReactDOM.render(<MyProgress />, mountNode);

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