Progress 进度条

规则

• 需要准确告知当前进度。否则应该使用组件 ActivityIndicator。

• 和 NavBar 一起搭配使用时，可以隐藏 Progress 未填充部分的轨道，提升整体感。

代码演示

基本

import { Progress, Button } from 'antd-mobile';
const MyProgress = React.createClass({
  getInitialState() {
    return {
      percent: 50,
    };
  },
  add() {
    let p = this.state.percent + 10;
    if (this.state.percent >= 100) {
      p = 0;
    }
    this.setState({ percent: p });
  },
  render() {
    const { percent } = this.state;
    return (
      <div className="progress-container">
        <Progress percent={30} position="fixed" />
        <div style={{ height: 36 }} />
        <Progress percent={40} position="normal" unfilled="hide" />
        <div className="show-info">
          <div className="progress"><Progress percent={percent} position="normal" /></div>
          <div>{percent}%</div>
        </div>
        <Button inline style={{ marginTop: 20 }} onClick={this.add}>(+-)10</Button>
      </div>
    );
  },
});
ReactDOM.render(<MyProgress />, mountNode);

.show-info {
  margin-top: 0.36rem;
  display: flex;
  align-items: center;
}
.show-info .progress {
  margin-right: 0.1rem;
  width: 100%;
}

API ( 适用平台：WEB、React-Native )