Loading (加载)

<template>
  <!-- 无默认插槽时，KunLoading 作为独立的居中加载器渲染（内置吉祥物图片）。 -->
  <KunLoading description="正在摸鱼中...咕咕咕" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 有默认插槽时，KunLoading 作为遮罩层覆盖在内容之上，由 loading 控制显隐。
const loading = ref(true)
</script>

<template>
  <div class="flex w-full max-w-sm flex-col items-start gap-3">
    <KunButton size="sm" variant="bordered" @click="loading = !loading">
      切换遮罩
    </KunButton>
    <KunLoading :loading="loading">
      <KunCard class-name="flex h-32 items-center justify-center">
        <span>被遮罩覆盖的内容</span>
      </KunCard>
    </KunLoading>
  </div>
</template>

<template>
  <!-- spinner=true 用紧凑的旋转图标代替吉祥物图片；size 控制旋转图标尺寸。 -->
  <div class="flex flex-wrap items-end gap-10">
    <KunLoading spinner size="sm" description="加载中" />
    <KunLoading spinner size="md" description="加载中" />
    <KunLoading spinner size="lg" description="加载中" />
  </div>
</template>