Spin 加载中

用于页面和区块的加载中状态。

何时使用

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

代码演示

基本用法

一个简单的 loading 状态。

<template>
  <div>
    <a-spin />
  </div>
</template>

各种大小

小的用于文本加载，默认用于卡片容器级加载，大的用于页面级加载。

<template>
  <div>
    <a-spin size="small" />
    <a-spin />
    <a-spin size="large" />
  </div>
</template>

容器

放入一个容器中。

<style scoped>
  .example {
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 30px 50px;
    margin: 20px 0;
  }
</style>
<template>
  <div class="example">
    <a-spin />
  </div>
</template>

卡片加载中

可以直接把内容内嵌到 Spin 中，将现有容器变为加载状态。

<style scoped>
  .spin-content {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 30px;
  }
</style>
<template>
  <div>
    <a-spin :spinning="spinning">
      <div class="spin-content">
        可以点击‘切换’按钮，控制本区域的spin展示。
      </div>
    </a-spin>
    Loading state：<a-switch v-model="spinning"></a-switch>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        spinning: false,
      };
    },
    methods: {
      changeSpinning() {
        this.spinning = !this.spinning;
      },
    },
  };
</script>

自定义描述文案

自定义描述文案。

<style scoped>
  .spin-content {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 30px;
  }
</style>
<template>
  <div>
    <a-spin tip="Loading...">
      <div class="spin-content">
        我的描述文案是自定义的。。。
      </div>
    </a-spin>
  </div>
</template>

延迟

延迟显示 loading 效果。当 spinning 状态在 delay 时间内结束，则不显示 loading 状态。

<style scoped>
  .spin-content {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 30px;
  }
</style>
<template>
  <div>
    <a-spin :spinning="spinning" :delay="delayTime">
      <div class="spin-content">
        可以点击‘切换’按钮，延迟显示 loading 效果。当 spinning 状态在 `delay` 时间内结束，则不显示
        loading 状态。
      </div>
    </a-spin>
    Loading state：<a-switch v-model="spinning"></a-switch>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        spinning: false,
        delayTime: 500,
      };
    },
    methods: {
      changeSpinning() {
        this.spinning = !this.spinning;
      },
    },
  };
</script>

自定义指示符

使用自定义指示符。

<template>
  <div>
    <a-spin>
      <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
    </a-spin>
    <a-spin :indicator="indicator" />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      };
    },
  };
</script>

API

静态方法

• Spin.setDefaultIndicator({indicator}) 同上 indicator，你可以自定义全局默认元素

Spin.setDefaultIndicator({
  indicator: h => {
    return <i class="anticon anticon-loading anticon-spin ant-spin-dot"></i>;
  },
});
或者;
Spin.setDefaultIndicator({
  indicator: {
    render() {
      return <i class="anticon anticon-loading anticon-spin ant-spin-dot"></i>;
    },
  },
});