Components / Composites

Spinner

Pending state: a faint ring with a running arc. Pair with disabled and aria-busy.

pnpm exec shadcn add @intelligo/spinner

Inside an app made by intelligo create, or any shadcn project that names the registry.

built on

Nothing else from the registry.

used by these pages

Auth: Login, Auth: Signup, Auth: Password Reset, Auth: Email Verification, Checkout, QR Payment (poll), Artifacts, Chat

more in composites

Input group, Attachment

Source

What shadcn add writes to components/ui/spinner.tsx. It is yours from then on.

/*
 * The spinner: a faint ring with a bright arc running round it, in the
 * current colour.
 */

import * as React from "react";

import { cn } from "@showcase/lib/utils";

function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <svg
      data-slot="spinner"
      role="status"
      aria-label="Loading"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2.5}
      strokeLinecap="round"
      className={cn("size-4 animate-spin", className)}
      {...props}
    >
      <circle cx="12" cy="12" r="9" className="opacity-20" />
      <path d="M21 12a9 9 0 0 0-9-9" />
    </svg>
  );
}

export { Spinner };

Ready to try it? Three commands and the app runs against a stub model.

GitHubDocsGet started