Soft Hardware Spinner

Component 1

About

A small loading indicator with a sunk circular well and a turning green arc, used inside or beside a control (like a Save button) while it's working, that waits briefly before appearing so quick actions never flash it.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Soft Hardware Spinner to your project and fits it to your theme.

Code

How Soft Hardware Spinner is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { Spinner } from "@/components/ui/spinner";

export default function SpinnerDemo() {
  const [saving, setSaving] = React.useState<"quick" | "slow" | null>(null);
  const [saved, setSaved] = React.useState(false);

  const save = (which: "quick" | "slow", ms: number) => {
    setSaved(false);
    setSaving(which);
    setTimeout(() => {
      setSaving(null);
      setSaved(true);
    }, ms);
  };

  return (
    <div className="flex min-h-screen w-full flex-col items-center justify-center gap-5 bg-background p-10 text-foreground">
      <div className="flex items-center gap-4">
        <Spinner label="Loading preview" />
        <Spinner size="small" label="Loading row" />
      </div>
      <div className="flex gap-2" aria-busy={saving != null}>
        <button
          type="button"
          onClick={() => save("quick", 250)}
          disabled={saving != null}
          className="inline-flex h-8 items-center gap-1.5 rounded-full bg-neutral-100 px-4 text-sm font-medium text-neutral-900 disabled:opacity-40 dark:bg-neutral-800 dark:text-neutral-100"
        >
          {saving === "quick" && <Spinner size="small" label="Saving" />}
          Quick save
        </button>
        <button
          type="button"
          onClick={() => save("slow", 2200)}
          disabled={saving != null}
          className="inline-flex h-8 items-center gap-1.5 rounded-full bg-neutral-900 px-4 text-sm font-medium text-white disabled:opacity-40 dark:bg-neutral-100 dark:text-neutral-900"
        >
          {saving === "slow" && <Spinner size="small" label="Saving" />}
          {saving === "slow" ? "Saving" : "Slow save"}
        </button>
      </div>
      <p className="text-xs text-neutral-500">
        {saving ? "saving" : saved ? "saved" : "regular · small · in a button"}
      </p>
    </div>
  );
}