LoadingSpinner

Border spinner in three sizes that takes its colour from the primary token.

npx bezel-add add loading-spinner

About

A minimal CSS loading spinner for React in three sizes. It is a spinning ring with a gap, coloured from your theme's primary token, so it matches light and dark themes without extra setup. Use it inside buttons, cards or page sections when you need a plain loading indicator rather than an illustrated loader.

Key props: size ("sm", "md" or "lg"), className (classes for the centring wrapper)

packages/ui/src/feedback/LoadingSpinner.tsx · 16 lines

const sizes = {
  sm: "h-4 w-4 border-2",
  md: "h-8 w-8 border-[3px]",
  lg: "h-12 w-12 border-4",
}

interface LoadingSpinnerProps {
  size?: "sm" | "md" | "lg"
  className?: string
}

export const LoadingSpinner = ({ size = "md", className }: LoadingSpinnerProps) => (
  <div className={`flex items-center justify-center${className ? ` ${className}` : ""}`}>
    <div className={`animate-spin rounded-full border-primary border-t-transparent ${sizes[size]}`} />
  </div>
)