ActivityIndicator 活动指示器

表明某个任务正在进行中。

规则

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

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

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

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

代码演示

基本用法

基本的活动指示器。

  1. import { ActivityIndicator, WingBlank, WhiteSpace, Button } from 'antd-mobile';
  2. const App = React.createClass({
  3. getInitialState() {
  4. return {
  5. animating: false,
  6. };
  7. },
  8. componentWillUnmount() {
  9. clearTimeout(this.closeTimer);
  10. },
  11. showToast() {
  12. this.setState({ animating: !this.state.animating });
  13. this.closeTimer = setTimeout(() => {
  14. this.setState({ animating: !this.state.animating });
  15. }, 2000);
  16. },
  17. render() {
  18. return (
  19. <div>
  20. <WingBlank>
  21. <div className="loading-container">
  22. <WhiteSpace size="xl" />
  23. <div className="loading-example">
  24. <p className="title">icon无文案</p>
  25. <ActivityIndicator animating />
  26. </div>
  27. <WhiteSpace size="xl" />
  28. <div className="loading-example">
  29. <p className="title">icon带文案</p>
  30. <ActivityIndicator
  31. text="加载中..."
  32. />
  33. </div>
  34. <WhiteSpace size="xl" />
  35. <div className="loading-example white">
  36. <p className="title">深色背景</p>
  37. <div className="darkBg">
  38. <ActivityIndicator color="white" />
  39. </div>
  40. </div>
  41. <WhiteSpace size="xl" />
  42. <div className="loading-example">
  43. <p className="title">大号icon</p>
  44. <ActivityIndicator
  45. size="large"
  46. />
  47. </div>
  48. <WhiteSpace size="xl" />
  49. <Button type="ghost" onClick={this.showToast}>点击显示 Toast</Button>
  50. <div className="toast-example">
  51. <ActivityIndicator
  52. toast
  53. text="正在加载"
  54. animating={this.state.animating}
  55. />
  56. </div>
  57. </div>
  58. </WingBlank>
  59. </div>
  60. );
  61. },
  62. });
  63. ReactDOM.render(<App />, mountNode);
  1. .title {
  2. font-size: 0.28rem;
  3. color: #888;
  4. font-weight: 300;
  5. width: 25%;
  6. }
  7. .loading-example {
  8. display: flex;
  9. margin-left: 0.2rem;
  10. margin-right: 0.2rem;
  11. }
  12. .darkBg {
  13. display: flex;
  14. justify-content: center;
  15. align-items: center;
  16. width: 0.89rem;
  17. height: 0.89rem;
  18. background-color: #2B2F42;
  19. }
  20. .loading-example .title {
  21. margin-right: 0.2rem;
  22. }

ActivityIndicator活动指示器 - 图1

API

  1. <ActivityIndicator />
  2. <ActivityIndicator color="white" />
  3. <ActivityIndicator size="large" />
  4. <ActivityIndicator text="正在加载" />
  5. <ActivityIndicator toast />
  6. <ActivityIndicator toast text="正在加载" />

ActivityIndicator

活动指示器。
参数说明类型可选值默认值
animating显隐状态booleantrue or falsetrue
colorspinner颜色stringgray or whitegray
sizespinner大小stringsmall or largesmall
toastloading样式类型booleantrue or falsefalse
textloading文本string