Ring Spinner

import { RingSpinner } from "@/components/ui/ring-spinner";

export default function Particle() {
  return (
    <div className="flex items-center gap-8">
      <RingSpinner />
      <RingSpinner className="size-8" />
      <RingSpinner className="size-6 text-primary" />
    </div>
  );
}

Установка

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @oracul/ring-spinner
Копировать

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

Copyimport { RingSpinner } from "@/components/ui/ring-spinner"

Copy<RingSpinner />

RingSpinner — тонкое кольцо из conic-gradient, вырезанное маской (не border и не дуги). Цвет берётся из currentColor (по умолчанию text-muted-foreground), размер задаётся через size-* (по умолчанию size-5 = 20px). В отличие от Spinner (иконка-лоадер), используется там, где нужен сдержанный кольцевой индикатор — например, в панели артефактов.

Справочник API

RingSpinner

Размер и цвет настраиваются классами: <RingSpinner className="size-8 text-primary" />.