加载指示器

import {
  Item,
  ItemContent,

Spinner 是一枚动画图标，用来表示有操作正在进行中。它封装了 lucide-react 的 LoaderIcon 并加上 animate-spin，开箱即带 role="status" 和 aria-label——不涉及任何基元库，所以两种后端共用同一份实现；它还继承 currentColor，能自动贴合所在的那个新粗野主义控件。

适合以下场景：

• 等待提交时——变更执行期间把它换进按钮里，文字标签保持原位。
• 行内加载状态——徽章、输入组和表格单元格等待数据时使用。
• 区块级加载——面板流式加载时与 Empty 搭配使用。

安装#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/spinner.json
npx shadcn@latest add https://neobrutalism.com/r/base/spinner.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/spinner.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/spinner.json
复制

import { Loader2Icon } from "lucide-react"

import { cn } from "@/lib/utils"

function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <Loader2Icon
      data-slot="spinner"
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}

export { Spinner }

用法#

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

复制<Spinner />

定制#

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

import { LoaderIcon } from "lucide-react"

import { cn } from "@/lib/utils"

复制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-* 工具类来更改加载指示器的尺寸。

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

export function SpinnerSize() {

Button#

为按钮添加加载指示器以表示加载状态。要放在起始位置，请在标签前放置带有 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 />。

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

Input Group#

import { ArrowUpIcon } from "lucide-react"

import {

Empty#

import { Button } from "@/components/ui/button"
import {
  Empty,

RTL#

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

"use client"

import * as React from "react"

无障碍#

Spinner 渲染出 role="status" 和 aria-label="Loading"，因此屏幕阅读器无需额外接线就会播报加载状态。如果旁边的文字已经说明了状态（比如「正在保存……」），那就给 Spinner 传 aria-hidden="true" 吧——播报一次就够了。若是整块区域切换到加载状态，请在容器上设置 aria-busy="true"。