Spinner

Indicate that an operation is still running.

View component source ↗

Preview

Example

A minimal example to get started.

Loading your workspace…

Installation

Install this component and its dependencies in a project initialized with shadcn.

pnpm dlx shadcn@latest add https://ui.hyunjoon.net/r/spinner.json

Usage

This is the basic example. Use the Code tab above for the selected example. Adjust import aliases to match your project.

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

export default function Example() {
  return (
    <div className="flex items-center gap-2 text-sm">
      <Spinner />
      Loading your workspace…
    </div>
  );
}

API reference

Derived from the installed component types. Native DOM props are also supported where applicable. A dash means no explicit default is documented. Some props depend on the selected mode.

Spinner

Spinner properties
Prop	Type	Default	Description
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`max`	string \| number \| undefined string \| number \| undefined	`—`	Maximum allowed value.
`min`	string \| number \| undefined string \| number \| undefined	`—`	Minimum allowed value.
`name`	string \| undefined string \| undefined	`—`	Field name used in form data.
`target`	string \| undefined string \| undefined	`—`	Browsing context in which the link opens.
`type`	string \| undefined string \| undefined	`—`	The native input or button behavior.
`href`	string \| undefined string \| undefined	`—`	Destination URL for the link.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<SVGSVGElement> \| undefined React.FocusEventHandler<SVGSVGElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<SVGSVGElement> \| undefined React.FocusEventHandler<SVGSVGElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<SVGSVGElement, Element> \| undefined React.ChangeEventHandler<SVGSVGElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<SVGSVGElement> \| undefined React.KeyboardEventHandler<SVGSVGElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<SVGSVGElement> \| undefined React.MouseEventHandler<SVGSVGElement> \| undefined	`—`	Called when the element is activated.
`ref`	React.Ref<SVGSVGElement> \| undefined React.Ref<SVGSVGElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).

Usage notes

Pair it with short status text when the reason for waiting is not obvious. Avoid hiding an actionable error behind indefinite loading.