Spinner

"use client"

import { Button } from "@/registry/warren/button/button"
import { Spinner } from "@/registry/warren/spinner/spinner"

export default function SpinnerDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Button variant="primary" disabled>
        <Spinner size="sm" />
        LOADING
      </Button>
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/spinner.json

Usage

import { Spinner } from "@/components/ui/spinner"

<Spinner size="md" />

Spinner is an inline span (role="status", sr-only "Loading") that rotates through four quarter-turn steps via the warren-spin keyframe. It renders as a track-tone square outline with a primary leading edge — stepped, so it reads as indeterminate progress, never as the live pulse of a system-active signal.

Sizes

size accepts sm (12px), md (16px, the default), or lg (20px) — the demo above shows all three. Inside a Button, pair sm with the 10px label so the square sits level with the text.

API Reference