Reference

API Reference

The Loader component, its props and its types.

<Loader />

Server Component safe

Renders one loader by name. It has no hooks, so it works in Server and Client Components.

usage.tsx

import { Loader } from '@/components/soonish';

<Loader
  name="ripple"
  color="oklch(0.864 0.05 276.62)"
  size={24}
  dotSize={3}
  speed={0.8}
  className="my-loader"
  style={{ opacity: 0.9 }}
/>

Props

Prop	Type	Default	Description
name*	LoaderName	—	Which loader to show. Any of the 91 LoaderName values.
color	string	loader's pastel	Any CSS color: hex, rgb, hsl or var(--token).
size	number	24	Width of the whole loader in pixels, not of one dot. The gap between dots adjusts to fit.
dotSize	number	3	Size of each dot, in pixels.
cellPadding	number	—	Gap between dots, in pixels. Overrides size; the loader grows to fit.
speed	number	1	Playback speed. 2 is twice as fast, 0.5 is half.
className	string	—	Class names for the outer wrapper.
style	React.CSSProperties	—	Inline styles for the outer wrapper.

LoaderName type

A union of all 91 loader names. Your editor autocompletes it on the name prop.

type LoaderName =
  // Pulse Wave
  | 'sweep' | 'diagonal' | 'ripple' | 'rain' | 'spiral'
  | 'snake' | 'sparkle' | 'heartbeat' | 'scanner' | 'orbit'
  | 'breathe' | 'checker' | 'stripes' | 'falling' | 'plasma'
  | 'loadbar' | 'knight-tour' | 'vortex' | 'sine-wave' | 'life'
  | 'quadrants' | 'crossfade' | 'glider' | 'matrix' | 'pong'
  | 'concentric' | 'twin-spirals'
  // AI / Process
  | 'thinking' | 'searching' | 'finding' | 'consolidating' | 'streaming'
  | 'reasoning' | 'indexing' | 'connecting' | 'generating' | 'reflecting'
  // Scale
  | 'scale-ripple' | 'scale-wave' | 'scale-diag' | 'scale-pop' | 'scale-ring'
  | 'scale-check'
  // Funky Scale
  | 'twist' | 'squash' | 'jelly' | 'pop-rotate' | 'skew'
  | 'heartbeat-scale' | 'drop' | 'burst' | 'spiral-scale' | 'zigzag'
  // Mandalas
  | 'round' | 'square-mandala' | 'diamond-mandala' | 'cross' | 'x-diagonal'
  | 'star-burst' | 'petal' | 'snowflake' | 'gear' | 'kaleido'
  | 'spiral-mandala' | 'pulse-square' | 'check-mandala' | 'octagon' | 'lotus'
  | 'outline' | 'rings' | 'rose'
  // Patterns
  | 'sonar' | 'pinwheel' | 'domino' | 'corners' | 'frame'
  | 'raindrop' | 'pendulum' | 'firefly' | 'halo'
  // Ported — dot-matrix
  | 'neon-drift' | 'core-spiral' | 'twin-orbit' | 'prism-sweep' | 'flux-columns'
  | 'echo-ring' | 'origin-wave'
  // Compiled Fields
  | 'front-sweep' | 'ripple-echo' | 'pulse-beat' | 'lumen-bloom';

TypeScript

The types ship with the source. Import LoaderName and LoaderProps to use them in your own components.

types-example.tsx

import type { LoaderName, LoaderProps } from '@/components/soonish';
import { Loader } from '@/components/soonish';

// Use LoaderName as a prop type in your own components
interface ButtonProps {
  loaderName?: LoaderName;
  isLoading: boolean;
}

function Button({ loaderName = 'sweep', isLoading }: ButtonProps) {
  return (
    <button>
      {isLoading ? <Loader name={loaderName} size={20} /> : 'Submit'}
    </button>
  );
}

// Or spread LoaderProps
function MyLoader(props: LoaderProps) {
  return <Loader {...props} />;
}

Note:TypeScript 5 or later is recommended. The files compile with your own tsconfig — there's no separate build to keep in sync.