Spinner

free

Spinner signals that a component or page is loading while work is in progress.

Preview

Dark

Loading data

import Spinner from '@/components/ui/Spinner';

export default function UsageDemo() {
  return (
    <div className="inline-flex items-center gap-2 text-muted-foreground">
      <Spinner />
      <span>Loading data</span>
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Spinner

Examples

Basic

Preview

Dark

import Spinner from '@/components/ui/Spinner';

export default function BasicDemo() {
  return <Spinner />;
}

Size

Preview

Dark

import Spinner from '@/components/ui/Spinner';

export default function SizeDemo() {
  return (
    <div className="flex items-center gap-8">
      <Spinner size={20} />
      <Spinner size={30} />
      <Spinner size="40px" />
      <Spinner size="3.25rem" />
    </div>
  );
}

Color

Preview

Dark

Loading results

Syncing changes

Cancelling order

import Spinner from '@/components/ui/Spinner';

export default function ColorDemo() {
  return (
    <div className="flex flex-col gap-4 text-sm">
      <div className="flex items-center gap-2">
        <Spinner size={24} />
        <span className="text-muted-foreground">Loading results</span>
      </div>
      <div className="flex items-center gap-2">
        <Spinner size={24} className="text-warning" />
        <span className="text-warning">Syncing changes</span>
      </div>
      <div className="flex items-center gap-2">
        <Spinner size={24} className="text-destructive" />
        <span className="text-destructive">Cancelling order</span>
      </div>
    </div>
  );
}

Custom Indicator

Preview

Dark

import Spinner from '@/components/ui/Spinner';
import { PiCircleNotch } from 'react-icons/pi'

export default function CustomIndicatorDemo() {
  return <Spinner size={40} indicator={PiCircleNotch} />;
}

Static

Preview

Dark

import Spinner from '@/components/ui/Spinner';

export default function StaticDemo() {
  return (
    <div className="flex items-center gap-8">
      <Spinner size={40} />
      <Spinner size={40} isSpining={false} />
    </div>
  );
}

API

Spinner renders the default arc indicator by default, or any icon component passed to indicator. Color follows the current text color, so a text color utility on className restyles the graphic.

Prop	Description	Type	Default
`size`	Height and width of the spinner, in pixels or a CSS size.	`string \| number`	`20`
`isSpining`	Whether the spin animation runs.	`boolean`	`true`
`indicator`	Component rendered in place of the default arc graphic.	`ElementType`	-
`enableTheme`	Apply the default primary color and theme class.	`boolean`	`true`
`trackClassName`	Class for the faint background ring of the default indicator.	`string`	-
`indicatorClassName`	Class for the moving arc of the default indicator.	`string`	-
`className`	Class names applied to the rendered indicator, including its color.	`string`	-
`style`	Inline styles merged with the computed size.	`CSSProperties`	-
`ref`	Ref forwarded to the rendered indicator.	`Ref<HTMLElement>`	-
`...nativeProps`	Native props for the rendered indicator element.	`ComponentProps<ElementType>`	-