Carregando

import {
  Item,
  ItemContent,

O spinner é um único ícone animado que sinaliza uma operação em andamento. Ele encapsula o LoaderIcon do lucide-react com animate-spin e já traz role="status" e um aria-label de fábrica — sem biblioteca de primitivas envolvida, então os dois backends compartilham a mesma implementação, e ele herda currentColor para combinar com qualquer controle neobrutalista em que estiver.

Quando usar:

• Envios pendentes — coloque-o dentro do botão enquanto a mutação roda; o rótulo permanece no lugar.
• Estados de busca inline — badges, grupos de input e células de tabela aguardando dados.
• Carregamentos de seção — combine-o com Empty enquanto o conteúdo de um painel chega em streaming.

Instalação#

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
Copiar

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 }

Uso#

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

Copiar<Spinner />

Personalização#

Você pode substituir o ícone padrão do spinner por qualquer outro ícone editando o componente Spinner.

import { LoaderIcon } from "lucide-react"

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

Copiarimport { 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 }

Exemplos#

Tamanho#

Use a classe utilitária size-* para alterar o tamanho do spinner.

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

export function SpinnerSize() {

Button#

Adicione um spinner a um botão para indicar um estado de carregamento. Coloque <Spinner /> antes do rótulo com data-icon="inline-start" para uma posição inicial, ou depois do rótulo com data-icon="inline-end" para uma posição final.

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

Badge#

Adicione um spinner a um badge para indicar um estado de carregamento. Coloque <Spinner /> antes do rótulo com data-icon="inline-start" para uma posição inicial, ou depois do rótulo com data-icon="inline-end" para uma posição final.

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#

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

"use client"

import * as React from "react"

Acessibilidade#

O spinner renderiza role="status" com aria-label="Loading", então leitores de tela anunciam o estado de carregamento sem nenhuma fiação extra. Quando um texto próximo já descreve o estado (“Salvando…”), passe aria-hidden="true" ao spinner em vez disso — um único anúncio basta. Para uma região inteira que entra em estado de carregamento, defina aria-busy="true" no contêiner.