SPINNER

Animated ASCII loader cycling through | / - \\ frames at 120ms. Optional text label with blink animation. Three sizes available.

PREVIEW

LOADING...PROCESSING DATA...

INSTALLATION

BASH

npx shadcn@latest add @scificn/spinner

USAGE

TSX

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

export function LoadingState() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
      <Spinner size="SM" />
      <span>SCANNING SECTOR...</span>
    </div>
  )
}

SIZES

SMsize="SM"

MDsize="MD"

LGsize="LG"

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
size	SM \| MD \| LG	MD	Font size of the spinner frame: SM=0.75rem, MD=0.875rem, LG=1rem.
label	string	—	Optional text shown after the spinner frame. Has blink-cursor animation.