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, Admin Console

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.
 *
 * Decorative unless named: a spinner beside text that already says what is
 * happening stays hidden from assistive technology, and one that stands in
 * for that text takes a translated `label` and is announced as a status.
 */

import * as React from "react";

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

function Spinner({
  className,
  label,
  ...props
}: React.ComponentProps<"svg"> & {
  /** What is loading, in the reader's language; omit when decorative. */
  label?: string;
}) {
  const name = label ?? props["aria-label"];
  return (
    <svg
      data-slot="spinner"
      role={name ? "status" : undefined}
      aria-hidden={name ? undefined : true}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2.5}
      strokeLinecap="round"
      className={cn("size-4 animate-spin", className)}
      {...props}
      aria-label={name}
    >
      <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