Spinner

Индикатор, который можно использовать для отображения состояния загрузки.

Установка


pnpm dlx shadcn@latest add @oracul/spinner

Использование

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

<Spinner />

Справочник API

Spinner

Используйте компонент Spinner для отображения индикатора загрузки.

Свойство	Тип	По умолчанию
`className`	`string`

Примеры

Группа ввода

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Spinner } from "@/components/ui/spinner";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput disabled placeholder="Обработка…" type="search" />
      <InputGroupAddon>
        <Spinner />
      </InputGroupAddon>
    </InputGroup>
  );
}

Кнопка

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

export default function Particle() {
  return (
    <Button disabled>
      <Spinner />
      Загрузка...
    </Button>
  );
}

На этой странице

Установка Использование Справочник API Spinner Примеры Группа ввода Кнопка