Spin 加载中

用于页面和区块的加载中状态，合适的加载动效可有效缓解用户焦虑。

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

何时使用

  • 局部内容加载中，需要遮罩包裹已有内容时。
  • 页面级或全屏加载中。
  • 需要展示加载进度或自定义指示符时。

仅需一个旋转图标（行内、按钮内）时，使用更轻量的 Spinner 加载圈。

代码演示

基础用法

<template>
  <Spin />
  <Spin size="small" />
  <Spin size="large" />
</template>

卡片加载中

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

<script setup lang="ts">
import { ref } from "vue";
import { Spin, Alert, Switch } from "@reglow/reui";

const loading = ref(false);
</script>

<template>
  <Spin :spinning="loading">
    <Alert type="info" title="提示" description="这是提示内容" />
  </Spin>
  <p>加载状态：<Switch v-model="loading" /></p>
</template>

自定义描述文案

<template>
  <Spin description="加载中..." size="large">
    <div class="h-32 bg-muted/50 rounded" />
  </Spin>
</template>

延迟

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

<script setup lang="ts">
import { ref } from "vue";
import { Spin } from "@reglow/reui";

const loading = ref(false);
</script>

<template>
  <Spin :spinning="loading" :delay="500">
    <div class="h-32 bg-muted/50 rounded" />
  </Spin>
</template>

自定义指示符

通过 #indicator 插槽自定义加载指示符。

<script setup lang="ts">
import { Loader2 } from "lucide-vue-next";
</script>

<template>
  <Spin :indicator="false">
    <template #indicator>
      <Loader2 class="size-6 animate-spin text-blue-500" />
    </template>
  </Spin>
</template>

进度

展示进度条，percent="auto" 会预估一个循环进度。

<script setup lang="ts">
import { ref } from "vue";
import { Spin } from "@reglow/reui";

const percent = ref(0);
const auto = ref(false);
</script>

<template>
  <Spin :percent="auto ? 'auto' : percent" size="small" />
  <Spin :percent="auto ? 'auto' : percent" />
  <Spin :percent="auto ? 'auto' : percent" size="large" />
</template>

全屏

fullscreen 属性创建带遮罩的页面级加载器。

<script setup lang="ts">
import { ref } from "vue";
import { Spin, Button } from "@reglow/reui";

const spinning = ref(false);
const percent = ref(0);

function showLoader() {
  spinning.value = true;
  percent.value = 0;
  const interval = setInterval(() => {
    percent.value += 5;
    if (percent.value > 120) {
      clearInterval(interval);
      spinning.value = false;
      percent.value = 0;
    }
  }, 100);
}
</script>

<template>
  <Button @click="showLoader">显示全屏加载</Button>
  <Spin :spinning="spinning" :percent="percent" fullscreen />
</template>

导入

import { Spin } from "@reglow/reui";

API

Spin Props

参数说明类型默认值
spinning是否为加载中状态booleantrue
size组件大小"small" | "default" | "large""default"
description自定义描述文案string-
delay延迟显示时间（毫秒），防止闪烁number-
indicator是否显示默认加载指示符booleantrue
fullscreen全屏模式booleanfalse
percent展示进度number | "auto"-
class自定义类名string-

Slots

名称说明参数
default包裹的内容（非全屏模式）-
indicator自定义加载指示符-

尺寸对照

size图标大小文字大小
small14px (size-3.5)text-xs
default20px (size-5)text-sm
large32px (size-8)text-base
Skeleton 骨架屏
Skeleton 骨架屏
Toast 轻提示
对用户操作做出及时反馈，顶部居中显示并自动消失。比 Notification 更轻量，通常仅一行内容。