113k
New

加载指示器（Spinner）

PreviousNext

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

Radix UIBase UI
Processing payment...
$100.00
import {
  Item,
  ItemContent,

安装

pnpm dlx shadcn@latest add spinner

使用方法

import { Spinner } from "@/components/ui/spinner"
<Spinner />

自定义

您可以通过编辑 Spinner 组件，将默认的加载图标替换成任何其他图标。

import { LoaderIcon } from "lucide-react"

import { cn } from "@/lib/utils"
components/ui/spinner.tsx
import { LoaderIcon } from "lucide-react"
 
import { cn } from "@/lib/utils"
 
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <LoaderIcon
      role="status"
      aria-label="加载中"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}
 
export { Spinner }

示例

尺寸

使用 size-* 工具类改变加载指示器的大小。

import { Spinner } from "@/components/ui/spinner"

export function SpinnerSize() {

按钮

在按钮中添加加载指示器以表示加载状态。使用 data-icon="inline-start" 将 <Spinner /> 放置在标签前以显示在起始位置，或使用 data-icon="inline-end" 将 <Spinner /> 放置在标签后以显示在结束位置。

import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"

徽章（Badge）

在徽章中添加加载指示器以表示加载状态。使用 data-icon="inline-start" 将 <Spinner /> 放置在标签前以显示在起始位置，或使用 data-icon="inline-end" 将 <Spinner /> 放置在标签后以显示在结束位置。

SyncingUpdatingProcessing
import { Badge } from "@/components/ui/badge"
import { Spinner } from "@/components/ui/spinner"

输入组

Validating...
import { ArrowUpIcon } from "lucide-react"

import {

空状态

Processing your request
Please wait while we process your request. Do not refresh the page.
import { Button } from "@/components/ui/button"
import {
  Empty,

RTL

要启用 shadcn/ui 中的 RTL 支持，请参阅RTL 配置指南。

جاري معالجة الدفع...
١٠٠.٠٠ دولار
"use client"

import * as React from "react"