ActivityIndicator 活动指示器

定义／Definition

规则 / Rule

• 当任务进行和加载时旋转，任务完成后自动消失；

• 不支持用户的交互行为；

• 不要使用静止的活动指示器，用户会以为该进程停滞了；

代码演示

基本用法

import { ActivityIndicator, WhiteSpace } from 'antd-mobile';
let App = React.createClass({
  render() {
    return (
      <div>
        <div className="loading-container" >
          <WhiteSpace size={20} />
          <div className="loading-example">
            <p className="title">icon无文案</p>
            <ActivityIndicator animating />
          </div>
          <WhiteSpace size={20} />
          <div className="loading-example">
            <p className="title">icon带文案</p>
            <ActivityIndicator
              text="正在加载..."
            />
          </div>
          <WhiteSpace size={20} />
          <div className="loading-example white">
            <p className="title">white</p>
            <ActivityIndicator color="white" />
          </div>
          <WhiteSpace size={20} />
          <div className="loading-example">
            <p className="title">大号</p>
            <ActivityIndicator
              size="large"
            />
          </div>
          <WhiteSpace size={20} />
          <WhiteSpace size={20} />
          <div className="toast-example">
            <p className="title">Toast</p>
            <ActivityIndicator
              toast
              text="正在加载"
            />
          </div>
        </div>
      </div>
    );
  },
});
ReactDOM.render(<App />, mountNode);

.loading-example {
  display: flex;
  margin-left: 20px;
  margin-right: 20px;
}
.loading-example.white {
  color: #fff;
  background-color: #2B2F42;
}
.loading-example .title {
  margin-right: 20px;
}

API

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

ActivityIndicator