Spinner

Loading spinner component with variants, sizes and smooth animations for indicating loading states

Installation

Install the Spinner component using the nocta-ui CLI:

npx nocta-ui add spinner

Import the component:

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

Three size options are available: sm, md, and lg. The default size is md.

Small

Medium

Large

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Spinner size
`variant`	`'default' \| 'primary' \| 'secondary'`	`'default'`	Spinner style variant
`className`	`string`	`''`	Additional CSS classes

The Spinner component also accepts all standard HTML div attributes.