Spinner
EcsightIndeterminate loading inside buttons and toasts.
ติดตั้ง
npx shadcn@latest add @ecsight/spinnerSource
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 }