Name a spinner while something loads
A spinning icon with an accessible name from the kit messages (`loading`).
Install
pnpm add @zedtech/zedkit-uiPackage version: 0.6.4 (changesets).
Import
import { Spinner, SpinnerProps } from "@zedtech/zedkit-ui";Registry source
Copy into your app after npx shadcn add (imports are rewritten for consumers).
"use client";
import { Loader2 } from "lucide-react";
import { useUiMessages } from "@/components/ui/ui-provider";
import { cn } from "@/lib/utils";
export interface SpinnerProps {
/** Accessible name. Kit `loading` message is the default. */
label?: string;
className?: string;
}
/** Named wait indicator. Pair with visible copy that names what is loading. */
export function Spinner({ label, className }: SpinnerProps) {
const messages = useUiMessages();
const name = label ?? messages.loading;
return (
<span data-slot="spinner" role="status" aria-label={name} className={cn("inline-flex", className)}>
<Loader2 aria-hidden className="size-icon-sm motion-safe:animate-spin" />
</span>
);
}
Exports
2 symbols from this import. Wraps: `lucide-react`
Preview
Examples
import { Spinner } from "@zedtech/zedkit-ui";
<Spinner />Live preview: Named wait
Preview
Saving invoices
import { Spinner, Text } from "@zedtech/zedkit-ui";
<Spinner label="Saving invoices" />
<Text>Saving invoices</Text>Props
Prop
Type
Accessibility
`role="status"` plus `aria-label`. The icon is `aria-hidden`. Keep visible text next to it that names the wait; a `label` prop overrides the kit `loading` string. The spin uses `motion-safe:animate-spin`.
Related
Troubleshooting
Screen readers say only "Loading" — pass `label` that names the operation, or keep visible text beside the spinner. The icon does not spin — `motion-safe:animate-spin` is static under reduced motion. Used as a full-page placeholder — prefer Skeleton so layout does not jump.