组件
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Spinner } from '@/components/ui/spinner'
</script>
<template>
<Button disabled>
<Spinner />
Processing Payment
</Button>
</template>安装
🌐 Installation
pnpm dlx shadcn-vue@latest add spinner
用法
🌐 Usage
<script setup lang="ts">
import { Spinner } from '@/components/ui/Spinner'
</script>
<template>
<Spinner />
</template>自定义
🌐 Customization
你可以通过编辑 Spinner 组件，将默认的加载图标替换为任何其他图标。
🌐 You can replace the default spinner icon with any other icon by editing the Spinner component.
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { LoaderIcon } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
const props = defineProps<{
class?: HTMLAttributes['class']
}>()
</script>
<template>
<LoaderIcon
role="status"
aria-label="Loading"
:class="cn('size-4 animate-spin', props.class)"
/>
</template>示例
🌐 Examples
大小
🌐 Size
使用 size-* 工具类来更改加载图标的大小。
🌐 Use the size-* utility class to change the size of the spinner.
<script setup lang="ts">
import { Spinner } from '@/components/ui/spinner'
</script>
<template>
<div class="flex items-center gap-6">
<Spinner class="size-3" />
<Spinner class="size-4" />
<Spinner class="size-6" />
<Spinner class="size-8" />
</div>
</template>颜色
🌐 Color
使用 text-* 工具类来更改加载图标的颜色。
🌐 Use the text-* utility class to change the color of the spinner.
<script setup lang="ts">
import { Spinner } from '@/components/ui/spinner'
</script>
<template>
<div class="flex items-center gap-6">
<Spinner class="size-6 text-red-500" />
<Spinner class="size-6 text-green-500" />
<Spinner class="size-6 text-blue-500" />
<Spinner class="size-6 text-yellow-500" />
<Spinner class="size-6 text-purple-500" />
</div>
</template>按钮
🌐 Button
在按钮上添加一个加载旋转图标以表示加载状态。<Button /> 将处理旋转图标与文本之间的间距。
🌐 Add a spinner to a button to indicate a loading state. The <Button /> will handle the spacing between the spinner and the text.
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Spinner } from '@/components/ui/spinner'
</script>
<template>
<div class="flex flex-col items-center gap-4">
<Button disabled size="sm">
<Spinner />
Loading...
</Button>
<Button variant="outline" disabled size="sm">
<Spinner />
Please wait
</Button>
<Button variant="secondary" disabled size="sm">
<Spinner />
Processing
</Button>
</div>
</template>徽章
🌐 Badge
你也可以在徽章内使用加载动画。
🌐 You can also use a spinner inside a badge.
Syncing
Updating
Processing
<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
import { Spinner } from '@/components/ui/spinner'
</script>
<template>
<div class="flex items-center gap-4 [--radius:1.2rem]">
<Badge>
<Spinner />
Syncing
</Badge>
<Badge variant="secondary">
<Spinner />
Updating
</Badge>
<Badge variant="outline">
<Spinner />
Processing
</Badge>
</div>
</template>输入组
🌐 Input Group
输入组可以在 <InputGroupAddon> 内包含旋转器。
🌐 Input Group can have spinners inside <InputGroupAddon>.
Validating...
<script setup lang="ts">
import { ArrowUpIcon } from 'lucide-vue-next'
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupTextarea,
} from '@/components/ui/input-group'
import { Spinner } from '@/components/ui/spinner'
</script>
<template>
<div class="flex w-full max-w-md flex-col gap-4">
<InputGroup>
<InputGroupInput placeholder="Send a message..." disabled />
<InputGroupAddon align="inline-end">
<Spinner />
</InputGroupAddon>
</InputGroup>
<InputGroup>
<InputGroupTextarea placeholder="Send a message..." disabled />
<InputGroupAddon align="block-end">
<Spinner /> Validating...
<InputGroupButton class="ml-auto" variant="default">
<ArrowUpIcon />
<span class="sr-only">Send</span>
</InputGroupButton>
</InputGroupAddon>
</InputGroup>
</div>
</template>空
🌐 Empty
你可以在空状态中放置一个加载指示器。
🌐 You can place a spinner inside an empty state.
Processing your request
Please wait while we process your request. Do not refresh the page.
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyHeader,
EmptyMedia,
EmptyTitle,
} from '@/components/ui/empty'
import { Spinner } from '@/components/ui/spinner'
</script>
<template>
<Empty class="w-full">
<EmptyHeader>
<EmptyMedia variant="icon">
<Spinner />
</EmptyMedia>
<EmptyTitle>Processing your request</EmptyTitle>
<EmptyDescription>
Please wait while we process your request. Do not refresh the page.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button variant="outline" size="sm">
Cancel
</Button>
</EmptyContent>
</Empty>
</template>条目
🌐 Item
使用 <ItemMedia> 内的旋转器来表示加载状态。
🌐 Use the spinner inside <ItemMedia> to indicate a loading state.
Downloading...
129 MB / 1000 MB
<script setup lang="ts">
import { Button } from '@/components/ui/button'
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemFooter,
ItemMedia,
ItemTitle,
} from '@/components/ui/item'
import { Progress } from '@/components/ui/progress'
import { Spinner } from '@/components/ui/spinner'
</script>
<template>
<div class="flex w-full max-w-md flex-col gap-4 [--radius:1rem]">
<Item variant="outline">
<ItemMedia variant="icon">
<Spinner />
</ItemMedia>
<ItemContent>
<ItemTitle>Downloading...</ItemTitle>
<ItemDescription>129 MB / 1000 MB</ItemDescription>
</ItemContent>
<ItemActions class="hidden sm:flex">
<Button variant="outline" size="sm">
Cancel
</Button>
</ItemActions>
<ItemFooter>
<Progress :model-value="75" />
</ItemFooter>
</Item>
</div>
</template>API参考
🌐 API Reference
旋转器
🌐 Spinner
使用 Spinner 组件来显示一个加载动画。
🌐 Use the Spinner component to display a spinner.
| 属性 | 类型 | 默认值 |
|---|---|---|
class | string |
<template>
<Spinner />
</template>