Spinner

free

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

Loading data

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

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Spinner

pnpm dlx nateui@latest add Spinner

yarn dlx nateui@latest add Spinner

Examples

Basic

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

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

Size

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

export default function SizeDemo() {
  return (

Color

Loading results

Syncing changes

Cancelling order

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

export default function ColorDemo() {
  return (

Custom Indicator

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

export default function CustomIndicatorDemo() {

Static

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

export default function StaticDemo() {
  return (

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>`	-