109k
新建

加载指示器 (Spinner)

上一页下一页

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

Radix UIBase UI
Radix UI - shadcn/ui 组件库
正在处理付款...
$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="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}
 
export { Spinner }

示例

尺寸 (Size)

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

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

export function SpinnerSize() {

按钮

在按钮中添加加载器以指示加载状态。记得使用 data-icon="inline-start" 属性将加载器添加到按钮开头，并使用 data-icon="inline-end" 属性将加载器添加到按钮末尾。

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

徽章

在徽章 (badge) 中添加加载器以指示加载状态。记得使用 data-icon="inline-start" 属性将加载器添加到徽章开头，并使用 data-icon="inline-end" 属性将加载器添加到徽章末尾。

正在同步正在更新正在处理
import { Badge } from "@/components/ui/badge"
import { Spinner } from "@/components/ui/spinner"

输入框组

正在验证...
import {
  InputGroup,
  InputGroupAddon,

空状态

正在处理您的请求
处理您的请求时请稍候。请勿刷新页面。
import { Button } from "@/components/ui/button"
import {
  Empty,

RTL (从右至左)

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

正在处理付款...
100.00 美元
"use client"

import * as React from "react"