Spinner

A loading indicator component with multiple variants and customization options.

Installation


pnpm dlx bna-ui add spinner

import {
  Spinner,
  LoadingOverlay,
  InlineLoader,
  ButtonSpinner,
} from '@/components/ui/spinner';

<Spinner size='default' variant='default' />

The main spinner component with multiple variants and customization options.

Prop	Type	Default	Description
`size`	`'default' \| 'sm' \| 'lg' \| 'icon'`	`'default'`	The size of the spinner.
`variant`	`'default' \| 'cirlce' \| 'dots' \| 'pulse' \| 'bars'`	`'default'`	The visual variant of the spinner.
`label`	`string`	-	Optional label text to display with spinner.
`showLabel`	`boolean`	`false`	Whether to show the default "Loading..." label.
`style`	`ViewStyle`	-	Additional styles to apply to the container.
`color`	`string`	-	Custom color for the spinner.
`speed`	`'slow' \| 'normal' \| 'fast'`	`'normal'`	Animation speed of the spinner.

A full-screen overlay component with spinner for blocking UI interactions during loading.

Prop	Type	Default	Description
`visible`	`boolean`	-	Whether the overlay is visible.
`backdrop`	`boolean`	`true`	Whether to show a backdrop behind the spinner.
`backdropColor`	`string`	-	Custom backdrop color.
`backdropOpacity`	`number`	`0.5`	Opacity of the backdrop (0-1).
`onRequestClose`	`() => void`	-	Callback when overlay should be closed.
`...spinnerProps`	`SpinnerProps`	-	All props from the Spinner component.

A compact spinner optimized for inline usage within text or small containers.

Prop	Type	Default	Description
`size`	`'default' \| 'sm' \| 'lg' \| 'icon'`	`'sm'`	The size of the spinner.
`variant`	`'default' \| 'cirlce' \| 'dots' \| 'pulse' \| 'bars'`	`'default'`	The visual variant of the spinner.
`color`	`string`	-	Custom color for the spinner.

A spinner component specifically designed for button loading states.

Prop	Type	Default	Description
`size`	`'default' \| 'sm' \| 'lg' \| 'icon'`	`'sm'`	The size of the spinner.
`variant`	`'default' \| 'cirlce' \| 'dots' \| 'pulse' \| 'bars'`	`'default'`	The visual variant of the spinner.
`color`	`string`	-	Custom color for the spinner.

The Spinner component is built with accessibility in mind:

On This Page