ActivityIndicator 活动指示器

规则

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

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

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

代码演示

基本

import { ActivityIndicator, WingBlank, WhiteSpace, Button } from 'antd-mobile';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animating: false,
    };
  }
  componentWillUnmount() {
    clearTimeout(this.closeTimer);
  }
  showToast = () => {
    this.setState({ animating: !this.state.animating });
    this.closeTimer = setTimeout(() => {
      this.setState({ animating: !this.state.animating });
    }, 1000);
  }
  render() {
    return (
      <div>
        <WingBlank>
          <div className="loading-container">
            <p className="sub-title">icon without text</p>
            <div className="loading-example">
              <ActivityIndicator animating />
            </div>
            <WhiteSpace size="xl" />
            <p className="sub-title">icon with text</p>
            <div className="loading-example">
              <ActivityIndicator
                text="Loading..."
              />
            </div>
            <WhiteSpace size="xl" />
            <p className="sub-title">icon with large size and customized text style</p>
            <div className="loading-example">
              <div className="align">
                <ActivityIndicator size="large" />
                <span style={{ marginTop: 8 }}>Loading...</span>
              </div>
            </div>
          </div>
          <div className="toast-container">
            <WhiteSpace size="xl" />
            <Button onClick={this.showToast}>Click to show Toast</Button>
            <div className="toast-example">
              <ActivityIndicator
                toast
                text="Loading..."
                animating={this.state.animating}
              />
            </div>
          </div>
        </WingBlank>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

.loading-example {
  display: flex;
  justify-content: flex-start;
}
.align {
  display: flex;
  flex-direction: column;
}
.sub-title {
  color: #888;
  font-size: .28rem;
  padding: 30px 0 18px 0;
}

API

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

ActivityIndicator