Індикатор завантаження

import {
  Item,
  ItemContent,

Spinner — одна анімована іконка, що сигналізує про операцію «в польоті». Обгортає LoaderIcon з lucide-react через animate-spin і «з коробки» має role="status" плюс aria-label — без примітивної бібліотеки, тож обидва бекенди ділять одну реалізацію, і вона успадковує currentColor, щоб пасувати до необруталістського контролю, у якому сидить.

Коли це стане в пригоді:

• Очікування submit — підставте в кнопку, поки триває mutation; мітка лишається на місці.
• Inline-стани fetch — badge, input group і клітинки таблиці, що чекають на дані.
• Завантаження секцій — поєднайте з 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#

Додайте спінер до кнопки, щоб показати стан завантаження. Розмістіть <Spinner /> перед підписом із data-icon="inline-start" для позиції на початку або після підпису з data-icon="inline-end" для позиції в кінці.

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

Badge#

Додайте спінер до бейджа, щоб показати стан завантаження. Розмістіть <Spinner /> перед підписом із data-icon="inline-start" для позиції на початку або після підпису з data-icon="inline-end" для позиції в кінці.

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#

Щоб увімкнути підтримку RTL у Neobrutalism, перегляньте посібник із налаштування RTL.

"use client"

import * as React from "react"

Доступність#

Spinner рендерить role="status" з aria-label="Loading", тож програми зчитування з екрана оголошують стан завантаження без додаткової обв’язки. Коли сусідній текст уже описує стан («Збереження…»), передайте на spinner aria-hidden="true" — одного оголошення достатньо. Для цілого регіону, що переходить у стан завантаження, ставте aria-busy="true" на контейнер.