Spinner

An inline SVG rotated by `animate-spin` (see the Pebble paragraph for the ring and petals drawings); the gap or the bright bar is what reads as motion. It inherits color from its parent, so it matches any text or button. Under reduced motion the spin slows to 2 s per turn rather than stopping, because a frozen spinner looks like a broken one. With a `label` it is a `role="status"` region with sr-only text; with `label=""` it is `aria-hidden`.

**Pebble (2026-11-03).** The border ring was replaced by an inline SVG so the stroke can have round caps and a faint track. `ring` (default) draws a full circle at 18% opacity with a quarter arc on top; `petals` draws eight radial bars with opacity falling from 1 to 0.15 and steps the rotation through eight stops (`steps(8)` set inline, because an arbitrary timing-function class does not reliably beat the `animate-spin` shorthand), so the bright bar appears to travel instead of the whole mark turning. Stroke width is set per size in viewBox units (3 / 2.5 / 2.25) so the line stays 2-3 px on screen, and the small petals are lengthened to stay legible at 16 px. Colour is still `currentColor`, the reduced-motion 2 s spin is kept, and `data-variant` is exposed.

<!-- PEBBLE-LICENSE -->

registry/loader/spinner/spinner.tsx

/* PEBBLE-LICENSE
Built by Pebble. Component: spinner.

First-party license: MIT

The following first-party terms apply only to original Pebble material.

MIT License

Copyright (c) 2026 Praxys Solutions LLC (Pebble)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
END PEBBLE-LICENSE */

import * as React from "react";

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

const sizes = {
  sm: "size-4",
  md: "size-6",
  lg: "size-8",
} as const;

// Stroke width per size, in viewBox units (24), so the line reads 2–3 px.
const strokes = { sm: 3, md: 2.5, lg: 2.25 } as const;

const PETALS = 8;

export type SpinnerProps = Omit<
  React.ComponentProps<"span">,
  "children" | "role" | "aria-label" | "aria-hidden"
> & {
  size?: keyof typeof sizes;
  /**
   * `ring`: a quarter arc sweeping over a faint track. `petals`: eight
   * graded bars that step round, like a hardware activity light.
   */
  variant?: "ring" | "petals";
  /** Text read by the status region. Pass "" when the spinner is decorative. */
  label?: string;
};

export function Spinner({
  size = "md",
  variant = "ring",
  label = "Loading",
  className,
  ...props
}: SpinnerProps) {
  const stroke = strokes[size];
  return (
    <span
      data-slot="spinner"
      data-variant={variant}
      {...props}
      // `label` alone decides the a11y role, so it is applied after `props`.
      role={label ? "status" : undefined}
      aria-hidden={label ? undefined : true}
      className={cn("relative inline-grid shrink-0 place-items-center", sizes[size], className)}
    >
      <svg
        viewBox="0 0 24 24"
        fill="none"
        aria-hidden
        className="size-full animate-spin motion-reduce:[animation-duration:2s]"
        // Petals step through eight stops instead of gliding, so the brightest
        // bar appears to travel rather than the whole mark turning. Inline so
        // it reliably overrides the `animate-spin` shorthand's linear curve.
        style={variant === "petals" ? { animationTimingFunction: `steps(${PETALS})` } : undefined}
      >
        {variant === "petals" ? (
          Array.from({ length: PETALS }, (_, i) => (
            <line
              key={i}
              x1="12"
              y1={size === "sm" ? 2.5 : 3}
              x2="12"
              y2={size === "sm" ? 8 : 7.5}
              stroke="currentColor"
              strokeWidth={stroke}
              strokeLinecap="round"
              // Brightest at the top, fading anticlockwise behind it.
              opacity={1 - (i / PETALS) * 0.85}
              transform={`rotate(${-(i * 360) / PETALS} 12 12)`}
            />
          ))
        ) : (
          <>
            <circle
              cx="12"
              cy="12"
              r="9.5"
              stroke="currentColor"
              strokeWidth={stroke}
              opacity={0.18}
            />
            <path
              d="M12 2.5a9.5 9.5 0 0 1 9.5 9.5"
              stroke="currentColor"
              strokeWidth={stroke}
              strokeLinecap="round"
            />
          </>
        )}
      </svg>
      {label && <span className="sr-only">{label}</span>}
    </span>
  );
}