Display

Spinner

A small ring that spins in the current text color.

Preview

Install

pnpm dlx shadcn@latest add @abnormal/spinner

Brings inutils

Usage

import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

export default function SpinnerDemo() {
  return (
    <div className="flex items-center gap-4">
      <Spinner />
      <Button disabled>
        <Spinner />
        Saving
      </Button>
    </div>
  );
}

Source

import * as React from "react";
import { cn } from "@/lib/utils";

/** A small ring that spins in the current text color, for buttons and rows that are waiting. */
function Spinner({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="spinner"
      aria-hidden="true"
      className={cn(
        "inline-block size-3.5 shrink-0 animate-spin rounded-full border-[1.5px] border-current/30 border-t-current [animation-duration:0.8s]",
        className,
      )}
      {...props}
    />
  );
}

export { Spinner };