Spin 加载中

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

何时使用

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

代码演示

基本用法

一个简单的 loading 状态。

<template>
  <a-spin />
</template>
容器

放入一个容器中。

<template>
  <div class="example">
    <a-spin />
  </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>
Loading...
Alert message title
Further details about the context of this alert.
自定义描述文案

自定义描述文案。

<template>
  <a-spin tip="Loading...">
    <a-alert
      message="Alert message title"
      description="Further details about the context of this alert."
    ></a-alert>
  </a-spin>
</template>
自定义指示符

使用自定义指示符。

<template>
  <a-spin :indicator="indicator" />
</template>
<script lang="ts">
import { LoadingOutlined } from '@ant-design/icons-vue';
import { defineComponent, h } from 'vue';
export default defineComponent({
  setup() {
    const indicator = h(LoadingOutlined, {
      style: {
        fontSize: '24px',
      },
      spin: true,
    });
    return {
      indicator,
    };
  },
});
</script>
各种大小

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

<template>
  <a-space>
    <a-spin size="small" />
    <a-spin />
    <a-spin size="large" />
  </a-space>
</template>
Alert message title
Further details about the context of this alert.
Loading state：
卡片加载中

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

<template>
  <a-spin :spinning="spinning">
    <a-alert
      message="Alert message title"
      description="Further details about the context of this alert."
    ></a-alert>
  </a-spin>
  <div class="spin-state">
    Loading state：
    <a-switch v-model:checked="spinning" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const spinning = ref<boolean>(false);
    const changeSpinning = () => {
      spinning.value = !spinning.value;
    };
    return {
      spinning,
      changeSpinning,
    };
  },
});
</script>
<style scoped>
.spin-state {
  margin-top: 16px;
}
</style>
Alert message title
Further details about the context of this alert.
Loading state：
延迟

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

<template>
  <a-spin :spinning="spinning" :delay="delayTime">
    <a-alert
      message="Alert message title"
      description="Further details about the context of this alert."
    ></a-alert>
  </a-spin>
  <div class="spin-state">
    Loading state：
    <a-switch v-model:checked="spinning" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const spinning = ref<boolean>(false);
    const delayTime = 500;
    const changeSpinning = () => {
      spinning.value = !spinning.value;
    };
    return {
      spinning,
      delayTime,
      changeSpinning,
    };
  },
});
</script>
<style scoped>
.spin-state {
  margin-top: 16px;
}
</style>

API#

参数 说明 类型 默认值
delay 延迟显示加载效果的时间（防止闪烁） number (毫秒) -
indicator 加载指示符 vNode | slot -
size 组件大小，可选值为 small default large string 'default'
spinning 是否为加载中状态 boolean true
tip 当作为包裹元素时，可以自定义描述文案 string -
wrapperClassName 包装器的类属性 string -

静态方法