ActivityIndicator 活动指示器

规则

• 不要让活动指示器静止，用户会以为该任务停滞了。

• 在某些特定场景下，提供有意义的文案，帮助用户明白哪个任务正在进行中，eg：正在上传照片。

• 如果能知道用户的等待时间，可以使用组件 Progress 来替代。

• 可通过控制 ActivityIndicator 运动的快慢，来表明进程处理的速度。

代码演示

基本用法

import { ActivityIndicator, WingBlank, WhiteSpace, Button } from 'antd-mobile';
const App = React.createClass({
  getInitialState() {
    return {
      animating: false,
    };
  },
  componentWillUnmount() {
    clearTimeout(this.closeTimer);
  },
  showToast() {
    this.setState({ animating: !this.state.animating });
    this.closeTimer = setTimeout(() => {
      this.setState({ animating: !this.state.animating });
    }, 2000);
  },
  render() {
    return (
      <div>
        <WingBlank>
          <div className="loading-container">
            <WhiteSpace size="xl" />
            <div className="loading-example">
              <p className="title">icon无文案</p>
              <ActivityIndicator animating />
            </div>
            <WhiteSpace size="xl" />
            <div className="loading-example">
              <p className="title">icon带文案</p>
              <ActivityIndicator
                text="加载中..."
              />
            </div>
            <WhiteSpace size="xl" />
            <div className="loading-example white">
              <p className="title">深色背景</p>
              <div className="darkBg">
                <ActivityIndicator color="white" />
              </div>
            </div>
            <WhiteSpace size="xl" />
            <div className="loading-example">
              <p className="title">大号icon</p>
              <ActivityIndicator
                size="large"
              />
            </div>
            <WhiteSpace size="xl" />
            <Button type="ghost" onClick={this.showToast}>点击显示 Toast</Button>
            <div className="toast-example">
              <ActivityIndicator
                toast
                text="正在加载"
                animating={this.state.animating}
              />
            </div>
          </div>
        </WingBlank>
      </div>
    );
  },
});
ReactDOM.render(<App />, mountNode);

.title {
  font-size: 0.28rem;
  color: #888;
  font-weight: 300;
  width: 25%;
}
.loading-example {
  display: flex;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.darkBg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.89rem;
  height: 0.89rem;
  background-color: #2B2F42;
}
.loading-example .title {
  margin-right: 0.2rem;
}

API

<ActivityIndicator />
<ActivityIndicator color="white" />
<ActivityIndicator size="large" />
<ActivityIndicator text="正在加载" />
<ActivityIndicator toast />
<ActivityIndicator toast text="正在加载" />

ActivityIndicator