9.7k
新建

加载指示器

上一页下一页

用于显示加载状态的指示器。

<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>

安装

pnpm dlx shadcn-vue@latest add spinner

使用方法

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

<template>
  <Spinner />
</template>

自定义

您可以通过编辑 Spinner 组件来将默认加载图标替换为其他图标。

<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>

示例

尺寸

使用 size-* 工具类来更改加载图标的大小。

<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>

颜色

使用 text-* 工具类来更改加载图标的颜色。

<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 /> 组件将自动处理加载图标和文本之间的间距。

<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>

徽章

您也可以在徽章中使用加载图标。

正在同步
正在更新
正在处理
<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>

输入组

输入组可以在 <InputGroupAddon> 中包含加载图标。

正在验证...
<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>

空状态

您可以将加载图标放置在空状态组件中。

正在处理您的请求

请稍候，我们正在处理您的请求。请勿刷新页面。

<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> 中使用加载图标来指示加载状态。

正在下载...

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 参考

加载指示器

使用 Spinner 组件来显示加载图标。

属性类型默认
classstring
<template>
  <Spinner />
</template>
Sonner步进器