Spinner
SM · 950B gzip budgetA loading indicator announced once via role=status.
- Category
- Feedback & status
- Budget
- sm, single-purpose control
- External runtime
- React / React DOM only
axe fixtureSSR rendersource scanbundle budget
Preview
Live fixtureTry the component here. Locale-aware formatting and direction follow the selected language; example content and labels are not automatically translated. Overlay demos use interactive launchers.
Install
npx shadcn@latest add https://gear5-ui.vercel.app/r/spinner.jsonCopies the source into your project. Pulls in 2 shared registry items: cn, visually-hidden.
New here? Set up Tailwind and import aliases first →Source & props
Edit on GitHub ↗Prop types and inline documentation are included below. This is repository source; the installer rewrites shared imports for your project.
import { VisuallyHidden } from "./visually-hidden";
import { cn } from "../lib/cn";
export interface SpinnerProps {
label?: string;
className?: string;
}
/**
* A loading indicator. The spin itself is `aria-hidden`; the label — spoken
* once via `role="status"`, not repeated on every animation frame — is what
* assistive technology actually hears.
*/
export function Spinner({ label = "Loading…", className }: SpinnerProps) {
return (
<span role="status" className={cn("inline-flex items-center gap-2", className)}>
<span
aria-hidden="true"
className="size-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent motion-reduce:animate-none"
/>
<VisuallyHidden>{label}</VisuallyHidden>
</span>
);
}
What CI checks
Quality contract- Bundled, minified and gzipped against its tier budget
- Audited by axe in the state previewed above
- Rendered through react-dom/server with no browser globals
- Scanned for network calls, dangerous sinks, and unguarded animation