Spin 加载中

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

何时使用

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

示例

基础文字列表：

默认



不同尺寸



自定义文字



图标加文字加载



自定义图标

<template>
  默认
  <br />
  <br />
  <f-spin />
  <br />
  <br />
  不同尺寸
  <br />
  <br />
  <f-space>
    <f-spin size="small" />
    <f-spin />
    <f-spin size="large" />
  </f-space>
  <br />
  <br />
  自定义文字
  <br />
  <br />
  <f-space>
    <f-spin tip="Loading...">
      <template #indicator>
        <span style="display: none"></span>
      </template>
    </f-spin>
    <f-spin>
      <template #indicator>
        <span style="display: none"></span>
      </template>
      <template #tip>
        <span class="demo-text">Loading<i></i><i></i><i></i></span>
      </template>
    </f-spin>
  </f-space>
  <br />
  <br />
  图标加文字加载
  <br />
  <br />
  <f-spin tip="Loading..." />
  <br />
  <br />
  自定义图标
  <br />
  <br />
  <f-space>
    <f-spin>
      <template #indicator>
        <LoadingOutlined />
      </template>
    </f-spin>
    <f-spin :indicator="indicator" />
  </f-space>
</template>
<script lang="ts" setup>
import { h } from 'vue'
import { LoadingOutlined, SyncOutlined } from '@ant-design/icons-vue'

const indicator = h(SyncOutlined, {
  style: {
    fontSize: '20px',
  },
  spin: true,
})
</script>

<style lang="scss" scoped>
.demo-text {
  i {
    display: inline-block;
    width: 2px;
    height: 2px;
    background-color: #378eef;
    border-radius: 50%;
    margin-left: 2px;
    opacity: 0;
    animation: loading 1s ease-in-out infinite;
    &:nth-child(2) {
      animation-delay: 0.4s;
    }

    &:nth-child(3) {
      animation-delay: 0.8s;
    }
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

API

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

静态方法

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

  import { h } from 'vue';
  Spin.setDefaultIndicator({
    indicator: h('i', { class: 'anticon anticon-loading anticon-spin ant-spin-dot' }),
  });