Spinner

An animated terminal spinner with a set of built-in presets. Ported from Bubble Tea's spinner.

Spinner cycles through a list of frames at a fixed interval, rendering the current frame as colored text. The animation runs independently per instance, so multiple spinners on screen don't interfere with each other. The spinner prop accepts any SpinnerDef — use one of the built-in spinners presets or supply your own frames and interval.

import { Spinner, spinners } from 'giggles/ui';

function LoadingState() {
  return (
    <Box gap={1}>
      <Spinner />
      <Text>Loading…</Text>
    </Box>
  );
}

// Custom spinner
const pulse: SpinnerDef = { frames: ['◐', '◓', '◑', '◒'], interval: 120 };
<Spinner spinner={pulse} color="#E06C75" />

API Reference

Spinner

SpinnerDef

Examples

Presets

Twelve presets are available via the spinners object: line, dot, miniDot, jump, pulse, points, clock, hearts, moon, meter, hamburger, ellipsis.

import { Spinner, spinners } from 'giggles/ui';

<Spinner spinner={spinners.dot} />
<Spinner spinner={spinners.moon} color="yellow" />