安装

pnpm dlx shadcn-vue@latest add spinner

使用

<script setup lang="ts">
import { Spinner } from '@/components/ui/Spinner'
</script>

<template>
  <Spinner />
</template>

自定义

你可以通过编辑 Spinner 组件来更换默认的转圈图标。

示例

尺寸

使用 size-* 工具类更改转圈图标的尺寸。

颜色

使用 text-* 工具类更改转圈图标的颜色。

按钮

为按钮添加转圈图标以指示加载状态。 <Button /> 会处理转圈图标与文本之间的间距。

徽章

也可在徽章中使用转圈图标。

Syncing

Updating

Processing

输入组

InputGroup 可以在 <InputGroupAddon> 内使用转圈图标。

Validating...

空状态

Processing your request

Please wait while we process your request. Do not refresh the page.

项目

在 <ItemMedia> 中使用转圈图标以指示加载状态。

Downloading...

129 MB / 1000 MB

API 参考

Spinner

使用 Spinner 组件展示一个转圈图标。

Prop	Type	Default
class	string	``

<Spinner />