Spinner

Installation

Install the Spinner component using the nocta-ui CLI:

npx nocta-ui add spinner

Then import the component:

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

Basic Usage

Default Spinner

Primary Spinner

Secondary Spinner

Variants

The Spinner component supports three variants: default, primary, and secondary.

Sizes

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

Usage Examples

Loading Button

Inline Spinner

Customization

Custom Colors

Custom Styling

The Spinner component accepts a className prop for custom styling:

<Spinner className="w-10 h-10 border-4" />

<Spinner className="text-indigo-600 animate-pulse" />

<Spinner className="border-gradient-to-r from-purple-400 to-pink-400" />

Accessibility

The Spinner component includes proper accessibility attributes:

• role="status" for screen readers
• aria-label="Loading" to describe the loading state
• Hidden "Loading..." text for screen readers via sr-only

Props

The Spinner component also accepts all standard HTML div attributes.