Spinner

Ecsight

Indeterminate loading inside buttons and toasts.

ติดตั้ง

npx shadcn@latest add @ecsight/spinner

Source

components/ui/spinner.tsx
import { cn } from "cn"

/** Indeterminate loading indicator. Solar has no spinner glyph, so this is the one hand-drawn icon. */
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <svg
      data-slot="spinner"
      role="status"
      aria-label="Loading"
      viewBox="0 0 24 24"
      fill="none"
      className={cn("size-4 animate-spin", className)}
      {...props}
    >
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" opacity="0.2" />
      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  )
}

export { Spinner }