Loader

Indicates the loading state of a component or page with various animations.

Default

Classic spinning circle loader with border animation.

'use client'

export default function DefaultSpinner() {
  return (
    <div
      className='size-8 animate-spin rounded-full border-2 border-white/20 border-t-white'
      role='status'
      aria-live='polite'
    >
      <span className='sr-only'>Loading...</span>
    </div>
  )
}

Sizes

Different sizes of the default spinner - small, medium, and large.

'use client'

function Spinner({ size }) {
  return (
    <div
      className={`${size} animate-spin rounded-full border-2 border-white/20 border-t-white`}
      role='status'
      aria-live='polite'
    >
      <span className='sr-only'>Loading...</span>
    </div>
  )
}

export default function SizedSpinners() {
  return (
    <div className='flex items-center gap-6'>
      <Spinner size='size-6' />
      <Spinner size='size-8' />
      <Spinner size='size-10' />
    </div>
  )
}

With Label

Spinner combined with descriptive text for better user experience.

'use client'

export default function SpinnerWithLabel() {
  return (
    <div className='flex items-center gap-3'>
       <div
        className='size-6 animate-spin rounded-full border-2 border-white/20 border-t-white'
        role='status'
        aria-live='polite'
      >
        <span className='sr-only'>Loading...</span>
      </div>
      <span className='text-sm font-medium text-white/80'>Loading...</span>
    </div>
  )
}

Dots

Three bouncing dots animation - perfect for chat interfaces and messaging.

'use client'

export default function DotsSpinner() {
  return (
    <div className='flex items-center gap-1' role='status' aria-live='polite'>
      <div className='size-2 bg-white/70 rounded-full animate-bounce [animation-delay:-0.3s]'></div>
      <div className='size-2 bg-white/70 rounded-full animate-bounce [animation-delay:-0.15s]'></div>
      <div className='size-2 bg-white/70 rounded-full animate-bounce'></div>
      <span className='sr-only'>Loading...</span>
    </div>
  )
}

Bars

Equalizer-style bars animation - great for audio/media loading states.

'use client'

export default function BarsSpinner() {
  return (
    <div className='flex items-end gap-1 h-6' role='status' aria-live='polite'>
      <div className='w-1 bg-white/70 rounded-sm animate-pulse [animation-delay:-0.4s] h-2'></div>
      <div className='w-1 bg-white/70 rounded-sm animate-pulse [animation-delay:-0.2s] h-4'></div>
      <div className='w-1 bg-white/70 rounded-sm animate-pulse h-6'></div>
      <div className='w-1 bg-white/70 rounded-sm animate-pulse [animation-delay:-0.2s] h-4'></div>
      <div className='w-1 bg-white/70 rounded-sm animate-pulse [animation-delay:-0.4s] h-2'></div>
      <span className='sr-only'>Loading...</span>
    </div>
  )
}

Pulse

Pulsing circles with ripple effect - ideal for search or sync operations.

'use client'

export default function PulseSpinner() {
  return (
    <div className='relative flex items-center justify-center' role='status' aria-live='polite'>
      <div className='size-8 rounded-full bg-white/20 animate-ping absolute'></div>
      <div className='size-6 rounded-full bg-white/40 animate-pulse'></div>
      <span className='sr-only'>Loading...</span>
    </div>
  )
}

Skeleton

Switch