Spinner to Check

A spinner pops into a drawn checkmark.

Make the next save fail

Installation

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/spinner-check.json

Manual

Install the dependencies
npm install clsx motion tailwind-merge

Add the shared helpers

Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

lib/motion.ts

import type { Transition, Variants } from "motion/react";

/** Durations in seconds. */
export const duration = {
  instant: 0.1,
  quick: 0.18,
  base: 0.28,
  slow: 0.45,
} as const;

/** Cubic-bezier curves. */
export const ease = {
  /** Entering, UI response. */
  out: [0.22, 1, 0.36, 1],
  /** Moving on screen. */
  inOut: [0.65, 0, 0.35, 1],
  /** Sheets and the mobile menu. */
  drawer: [0.32, 0.72, 0, 1],
} as const;

/** Everyday UI: presses, icon swaps, popovers and modals. Exits run at `exitFactor` of the enter. */
export const ui = {
  press: { scale: 0.96, duration: 0.12 },
  icon: { type: "spring", duration: 0.3, bounce: 0 },
  popover: { duration: 0.18, ease: ease.out },
  modal: { duration: 0.24, ease: ease.out },
  exitFactor: 0.6,
} as const;

/** Once-per-visit motion on the landing page: hero letters, the reel and the afterimage. */
export const kinetic = {
  heroLetter: { duration: 0.6, ease: ease.out },
  /** Delay per letter, eased so the wave slows toward the end. */
  heroStep: 0.035,
  reelSwap: { type: "spring", duration: 0.5, bounce: 0.1 },
  /** Two afterimages: lag in seconds and opacity of each. */
  ghost: { lag: [0.04, 0.09], opacity: [0.14, 0.06] },
} as const;

/** Spring presets. */
export const spring = {
  snappy: { type: "spring", stiffness: 500, damping: 30 },
  smooth: { type: "spring", stiffness: 260, damping: 26 },
  bouncy: { type: "spring", stiffness: 300, damping: 15 },
} as const satisfies Record<string, Transition>;

/** Stagger between siblings, in seconds (0.03–0.06). */
export const stagger = {
  tight: 0.03,
  base: 0.045,
  loose: 0.06,
} as const;

/** Blur + fade + y-offset. Falls back to a plain fade under reduced motion. */
export function enterVariants(reduceMotion?: boolean | null, y = 8): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.base } },
      exit: { opacity: 0, transition: { duration: duration.quick } },
    };
  }
  return {
    hidden: { opacity: 0, y, filter: "blur(4px)" },
    visible: {
      opacity: 1,
      y: 0,
      filter: "blur(0px)",
      transition: { duration: duration.base, ease: ease.out },
    },
    exit: {
      opacity: 0,
      y: -y / 2,
      filter: "blur(4px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
  };
}

/** Scale 0.96 → 1 for popovers, menus and dialogs. */
export function overlayVariants(reduceMotion?: boolean | null): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.quick } },
      exit: { opacity: 0, transition: { duration: duration.instant } },
    };
  }
  return {
    hidden: { opacity: 0, scale: 0.96, filter: "blur(2px)" },
    visible: {
      opacity: 1,
      scale: 1,
      filter: "blur(0px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
    exit: {
      opacity: 0,
      scale: 0.96,
      filter: "blur(2px)",
      transition: { duration: duration.instant + 0.02, ease: ease.out },
    },
  };
}

/** Parent variants that stagger their children in. */
export function staggerVariants(gap: number = stagger.base, delayChildren = 0): Variants {
  return {
    hidden: {},
    visible: { transition: { staggerChildren: gap, delayChildren } },
    exit: { transition: { staggerChildren: gap / 2, staggerDirection: -1 } },
  };
}

Add the theme tokens

This component uses --success, which shadcn does not define by default. Add it to your global CSS:

app/globals.css

:root {
  --success: #15803d;
}

.dark {
  --success: #4ade80;
}

@theme inline {
  --color-success: var(--success);
}

Copy the source

components/ui/spinner-check/spinner-check.tsx

"use client";

import type { ComponentProps } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";
import { duration, spring } from "@/lib/motion";

export type SpinnerStatus = "idle" | "loading" | "success" | "error";

export interface SpinnerCheckProps
  extends Omit<ComponentProps<"span">, "children" | "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd"> {
  /** What to show: a hollow ring, a spinner, a check, or a cross. */
  status: SpinnerStatus;
  /** Size in px. @default 20 */
  size?: number;
  /** Screen-reader text for each status. @default { idle: "Not started", loading: "Loading", success: "Done", error: "Failed" } */
  labels?: Partial<Record<SpinnerStatus, string>>;
}

const LABELS: Record<SpinnerStatus, string> = { idle: "Not started", loading: "Loading", success: "Done", error: "Failed" };

export function SpinnerCheck({ status, size = 20, labels, className, ...props }: SpinnerCheckProps) {
  const reduceMotion = useReducedMotion();
  const text = { ...LABELS, ...labels }[status];
  const fade = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: duration.quick } };
  const badge = {
    initial: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.5 },
    animate: { opacity: 1, scale: 1 },
    exit: { opacity: 0, scale: reduceMotion ? 1 : 0.8, transition: { duration: duration.instant } },
    transition: reduceMotion ? { duration: duration.base } : spring.bouncy,
  };
  const draw = (delay: number) => ({
    initial: { pathLength: reduceMotion ? 1 : 0 },
    animate: { pathLength: 1 },
    transition: { duration: reduceMotion ? 0 : 0.3, delay: reduceMotion ? 0 : delay, ease: "easeOut" as const },
  });

  return (
    <span role="status" className={cn("relative inline-flex shrink-0", className)} style={{ width: size, height: size }} {...props}>
      <span className="sr-only">{text}</span>
      <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true" className="overflow-visible">
        <AnimatePresence initial={false}>
          {status === "idle" ? (
            <motion.circle key="idle" cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity={0.35} strokeWidth={2} {...fade} />
          ) : null}
          {status === "loading" ? (
            <motion.g key="loading" {...fade}>
              <circle cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity={0.18} strokeWidth={2.4} />
              {/* A quarter arc that spins (pulses under reduced motion). It's a CSS animation, so it runs even when
                  the spinner is first rendered inside a presence that skips initial animations. */}
              <g className="origin-center animate-spin [transform-box:fill-box] motion-reduce:animate-pulse">
                <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round" pathLength={1} strokeDasharray="0.28 1" />
              </g>
            </motion.g>
          ) : null}
          {status === "success" ? (
            <motion.g key="success" {...badge}>
              <circle cx="12" cy="12" r="11" fill="var(--success)" />
              <motion.path d="M7.4 12.4l3.1 3.1 6.1-6.6" stroke="white" strokeWidth={2.4} strokeLinecap="round" strokeLinejoin="round" {...draw(0.12)} />
            </motion.g>
          ) : null}
          {status === "error" ? (
            <motion.g key="error" {...badge} animate={reduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1, x: [0, -2.5, 2.5, -1.5, 1.5, 0] }}>
              <circle cx="12" cy="12" r="11" fill="var(--destructive)" />
              <motion.path d="M8.5 8.5l7 7" stroke="white" strokeWidth={2.4} strokeLinecap="round" {...draw(0.1)} />
              <motion.path d="M15.5 8.5l-7 7" stroke="white" strokeWidth={2.4} strokeLinecap="round" {...draw(0.22)} />
            </motion.g>
          ) : null}
        </AnimatePresence>
      </svg>
    </span>
  );
}

Usage

import { SpinnerCheck } from "@/components/ui/spinner-check/spinner-check";

export function SaveButton({ status }: { status: "idle" | "loading" | "success" | "error" }) {
  return (
    <button>
      {status !== "idle" && <SpinnerCheck status={status} size={18} />}
      Save
    </button>
  );
}

API reference

Prop	Type	Default	Description
`status*`	`SpinnerStatus`	–	What to show: a hollow ring, a spinner, a check, or a cross.
`size`	`number`	`20`	Size in px.
`labels`	`Partial<Record<SpinnerStatus, string>>`	`{ idle: "Not started", loading: "Loading", success: "Done", error: "Failed" }`	Screen-reader text for each status.

Also accepts every native <span> attribute, including ref and className.

The spinner inherits currentColor, so it matches the text around it. Success uses --success and failure --destructive.
The badge pops in on a bouncy spring and the check draws on; a failure shakes once.
Also used by Thinking States and Agent Progress Steps.

Accessibility

A status region: each change is announced (“Loading”, “Done”, “Failed”); override the words with `labels`.
Success and failure pair color with a drawn check or cross, never color alone.
With reduced motion enabled, the spinner pulses in place instead of spinning, and the check appears without drawing.

Installation#

CLI

Manual

Install the dependencies