# CLI Spinner Loader

> 90 terminal-style text spinners in a single React component. Zero dependencies, keyboard-safe, tabular-nums for stable layout.

A shadcn/ui block from the [@elements](https://www.tryelements.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/elements/loader-cli-spinner).

- Page, with a live preview: https://shadcn.exchange/r/elements/loader-cli-spinner
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/elements/loader-cli-spinner-light-4793069196528dc0.png
- Registry item: https://www.tryelements.dev/r/loader-cli-spinner.json
- Categories: loaders
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.tryelements.dev/r/loader-cli-spinner.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Notes from the registry

Single component exposing 90 classic terminal spinner variants via a `variant` prop. Frames adapted from sindresorhus/cli-spinners (MIT). Use `speed` to scale the animation, `paused` to freeze, and `size` for font-sized scaling. The component renders as a single monospace glyph wrapped in `role=status` for a11y.

## Files

### `registry/default/blocks/loaders/loader-cli-spinner/components/elements/loader-cli-spinner.tsx`

```tsx
"use client";

import { useEffect, useRef, useState } from "react";

import { cn } from "@/lib/utils";

import { CLI_SPINNERS, type CliSpinnerVariant } from "./cli-spinner-data";

export type LoaderCliSpinnerProps = {
  variant?: CliSpinnerVariant;
  speed?: number;
  size?: number | string;
  paused?: boolean;
  ariaLabel?: string;
  className?: string;
};

export function LoaderCliSpinner({
  variant = "braille-spin",
  speed = 1,
  size = "1em",
  paused = false,
  ariaLabel = "Loading",
  className,
}: LoaderCliSpinnerProps) {
  const spinner = CLI_SPINNERS[variant] ?? CLI_SPINNERS["braille-spin"];
  const [index, setIndex] = useState(0);
  const indexRef = useRef(0);

  useEffect(() => {
    indexRef.current = 0;
    setIndex(0);
    if (paused || speed <= 0) return;
    const delay = Math.max(16, spinner.interval / speed);
    const id = window.setInterval(() => {
      indexRef.current = (indexRef.current + 1) % spinner.frames.length;
      setIndex(indexRef.current);
    }, delay);
    return () => window.clearInterval(id);
  }, [spinner, speed, paused]);

  const fontSize = typeof size === "number" ? `${size}px` : size;

  return (
    <output
      aria-label={ariaLabel}
      aria-live="polite"
      className={cn(
        "inline-flex items-center justify-center font-mono leading-none tabular-nums",
        className,
      )}
      style={{ fontSize, minWidth: "1ch" }}
    >
      <span aria-hidden="true">{spinner.frames[index]}</span>
    </output>
  );
}

export type { CliSpinnerVariant } from "./cli-spinner-data";
export { CLI_SPINNER_VARIANTS } from "./cli-spinner-data";
```

### `registry/default/blocks/loaders/loader-cli-spinner/components/elements/cli-spinner-data.ts`

```ts
// Frame data adapted from sindresorhus/cli-spinners (MIT)
// Renamed, reorganized, and re-exported for React UI.

export type CliSpinnerVariant =
  | "aesthetic"
  | "arc-spin"
  | "arrow-compass"
  | "arrow-move"
  | "arrow-spin"
  | "ball-bar"
  | "balloon-large"
  | "balloon-small"
  | "bar-bounce"
  | "beta-wave"
  | "bit-stream"
  | "blue-pulse"
  | "bouncer"
  | "box-bounce"
  | "box-bounce-thick"
  | "braille-bounce"
  | "braille-cascade"
  | "braille-circle"
  | "braille-corner"
  | "braille-drift"
  | "braille-fold"
  | "braille-matrix"
  | "braille-orbit"
  | "braille-pulse"
  | "braille-shift"
  | "braille-spin"
  | "braille-sweep"
  | "braille-tick"
  | "braille-wave"
  | "circle-pulse"
  | "clockwork"
  | "dot-circle"
  | "duo-pulse"
  | "dwarf-fortress"
  | "earth"
  | "ellipsis"
  | "ellipsis-scroll"
  | "fingers"
  | "fish"
  | "fist-bump"
  | "flipper"
  | "grenade"
  | "grow-h"
  | "grow-v"
  | "half-orbit"
  | "hearts"
  | "layer"
  | "letter-spin"
  | "line-dash"
  | "line-roll"
  | "line-slash"
  | "material-bar"
  | "mindblown"
  | "monkey"
  | "moon-phase"
  | "orange-pulse"
  | "pipe-turn"
  | "plus-pulse"
  | "point"
  | "pong"
  | "quarter-orbit"
  | "retro-braille"
  | "runner"
  | "sandglass"
  | "shark"
  | "smiley-spin"
  | "soccer"
  | "speaker"
  | "square-corners"
  | "squisher"
  | "stacker"
  | "static-noise"
  | "time-travel"
  | "toggle-1"
  | "toggle-10"
  | "toggle-11"
  | "toggle-12"
  | "toggle-13"
  | "toggle-2"
  | "toggle-3"
  | "toggle-4"
  | "toggle-5"
  | "toggle-6"
  | "toggle-7"
  | "toggle-8"
  | "toggle-9"
  | "tree"
  | "triangle-spin"
  | "twinkle"
  | "weather";

export type SpinnerData = {
  interval: number;
  frames: readonly string[];
};

export const CLI_SPINNERS: Record<CliSpinnerVariant, SpinnerData> = {
  aesthetic: {
    interval: 80,
    frames: [
      "▰▱▱▱▱▱▱",
      "▰▰▱▱▱▱▱",
      "▰▰▰▱▱▱▱",
      "▰▰▰▰▱▱▱",
      "▰▰▰▰▰▱▱",
      "▰▰▰▰▰▰▱",
      "▰▰▰▰▰▰▰",
      "▰▱▱▱▱▱▱",
    ],
  },
  "arc-spin": {
    interval: 100,
    frames: ["◜", "◠", "◝", "◞", "◡", "◟"],
  },
  "arrow-compass": {
    interval: 80,
    frames: ["⬆️ ", "↗️ ", "➡️ ", "↘️ ", "⬇️ ", "↙️ ", "⬅️ ", "↖️ "],
  },
  "arrow-move": {
    interval: 120,
    frames: ["▹▹▹▹▹", "▸▹▹▹▹", "▹▸▹▹▹", "▹▹▸▹▹", "▹▹▹▸▹", "▹▹▹▹▸"],
  },
  "arrow-spin": {
    interval: 100,
    frames: ["←", "↖", "↑", "↗", "→", "↘", "↓", "↙"],
  },
  "ball-bar": {
    interval: 80,
    frames: [
      "( ●    )",
      "(  ●   )",
      "(   ●  )",
      "(    ● )",
      "(     ●)",
      "(    ● )",
      "(   ●  )",
      "(  ●   )",
      "( ●    )",
      "(●     )",
    ],
  },
  "balloon-large": {
    interval: 120,
    frames: [".", "o", "O", "°", "O", "o", "."],
  },
  "balloon-small": {
    interval: 140,
    frames: [" ", ".", "o", "O", "@", "*", " "],
  },
  "bar-bounce": {
    interval: 80,
    frames: [
      "[    ]",
      "[=   ]",
      "[==  ]",
      "[=== ]",
      "[====]",
      "[ ===]",
      "[  ==]",
      "[   =]",
      "[    ]",
      "[   =]",
      "[  ==]",
      "[ ===]",
      "[====]",
      "[=== ]",
      "[==  ]",
      "[=   ]",
    ],
  },
  "beta-wave": {
    interval: 80,
    frames: [
      "ρββββββ",
      "βρβββββ",
      "ββρββββ",
      "βββρβββ",
      "ββββρββ",
      "βββββρβ",
      "ββββββρ",
    ],
  },
  "bit-stream": {
    interval: 80,
    frames: [
      "010010",
      "001100",
      "100101",
      "111010",
      "111101",
      "010111",
      "101011",
      "111000",
      "110011",
      "110101",
    ],
  },
  "blue-pulse": {
    interval: 100,
    frames: ["🔹 ", "🔷 ", "🔵 ", "🔵 ", "🔷 "],
  },
  bouncer: {
    interval: 120,
    frames: ["⠁", "⠂", "⠄", "⠂"],
  },
  "box-bounce": {
    interval: 120,
    frames: ["▖", "▘", "▝", "▗"],
  },
  "box-bounce-thick": {
    interval: 100,
    frames: ["▌", "▀", "▐", "▄"],
  },
  "braille-bounce": {
    interval: 80,
    frames: ["⠋", "⠙", "⠚", "⠞", "⠖", "⠦", "⠴", "⠲", "⠳", "⠓"],
  },
  "braille-cascade": {
    interval: 80,
    frames: [
      "⢀⠀",
      "⡀⠀",
      "⠄⠀",
      "⢂⠀",
      "⡂⠀",
      "⠅⠀",
      "⢃⠀",
      "⡃⠀",
      "⠍⠀",
      "⢋⠀",
      "⡋⠀",
      "⠍⠁",
      "⢋⠁",
      "⡋⠁",
      "⠍⠉",
      "⠋⠉",
      "⠋⠉",
      "⠉⠙",
      "⠉⠙",
      "⠉⠩",
      "⠈⢙",
      "⠈⡙",
      "⢈⠩",
      "⡀⢙",
      "⠄⡙",
      "⢂⠩",
      "⡂⢘",
      "⠅⡘",
      "⢃⠨",
      "⡃⢐",
      "⠍⡐",
      "⢋⠠",
      "⡋⢀",
      "⠍⡁",
      "⢋⠁",
      "⡋⠁",
      "⠍⠉",
      "⠋⠉",
      "⠋⠉",
      "⠉⠙",
      "⠉⠙",
      "⠉⠩",
      "⠈⢙",
      "⠈⡙",
      "⠈⠩",
      "⠀⢙",
      "⠀⡙",
      "⠀⠩",
      "⠀⢘",
      "⠀⡘",
      "⠀⠨",
      "⠀⢐",
      "⠀⡐",
      "⠀⠠",
      "⠀⢀",
      "⠀⡀",
    ],
  },
  "braille-circle": {
    interval: 80,
    frames: ["⣼", "⣹", "⢻", "⠿", "⡟", "⣏", "⣧", "⣶"],
  },
  "braille-corner": {
    interval: 80,
    frames: ["⣾", "⣽", "⣻", "⢿", "⡿", "⣟", "⣯", "⣷"],
  },
  "braille-drift": {
    interval: 80,
    frames: [
      "⠁",
      "⠁",
      "⠉",
      "⠙",
      "⠚",
      "⠒",
      "⠂",
      "⠂",
      "⠒",
      "⠲",
      "⠴",
      "⠤",
      "⠄",
      "⠄",
      "⠤",
      "⠠",
      "⠠",
      "⠤",
      "⠦",
      "⠖",
      "⠒",
      "⠐",
      "⠐",
      "⠒",
      "⠓",
      "⠋",
      "⠉",
      "⠈",
      "⠈",
    ],
  },
  "braille-fold": {
    interval: 80,
    frames: ["⢹", "⢺", "⢼", "⣸", "⣇", "⡧", "⡗", "⡏"],
  },
  "braille-matrix": {
    interval: 80,
    frames: [
      "⠉⠉",
      "⠈⠙",
      "⠀⠹",
      "⠀⢸",
      "⠀⣰",
      "⢀⣠",
      "⣀⣀",
      "⣄⡀",
      "⣆⠀",
      "⡇⠀",
      "⠏⠀",
      "⠋⠁",
    ],
  },
  "braille-orbit": {
    interval: 80,
    frames: [
      "⠁",
      "⠉",
      "⠙",
      "⠚",
      "⠒",
      "⠂",
      "⠂",
      "⠒",
      "⠲",
      "⠴",
      "⠤",
      "⠄",
      "⠄",
      "⠤",
      "⠴",
      "⠲",
      "⠒",
      "⠂",
      "⠂",
      "⠒",
      "⠚",
      "⠙",
      "⠉",
      "⠁",
    ],
  },
  "braille-pulse": {
    interval: 80,
    frames: [
      "⠄",
      "⠆",
      "⠇",
      "⠋",
      "⠙",
      "⠸",
      "⠰",
      "⠠",
      "⠰",
      "⠸",
      "⠙",
      "⠋",
      "⠇",
      "⠆",
    ],
  },
  "braille-shift": {
    interval: 80,
    frames: ["⢄", "⢂", "⢁", "⡁", "⡈", "⡐", "⡠"],
  },
  "braille-spin": {
    interval: 80,
    frames: ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"],
  },
  "braille-sweep": {
    interval: 80,
    frames: [
      "⠈",
      "⠉",
      "⠋",
      "⠓",
      "⠒",
      "⠐",
      "⠐",
      "⠒",
      "⠖",
      "⠦",
      "⠤",
      "⠠",
      "⠠",
      "⠤",
      "⠦",
      "⠖",
      "⠒",
      "⠐",
      "⠐",
      "⠒",
      "⠓",
      "⠋",
      "⠉",
      "⠈",
    ],
  },
  "braille-tick": {
    interval: 100,
    frames: ["⠁", "⠂", "⠄", "⡀", "⢀", "⠠", "⠐", "⠈"],
  },
  "braille-wave": {
    interval: 80,
    frames: [
      "⠋",
      "⠙",
      "⠚",
      "⠒",
      "⠂",
      "⠂",
      "⠒",
      "⠲",
      "⠴",
      "⠦",
      "⠖",
      "⠒",
      "⠐",
      "⠐",
      "⠒",
      "⠓",
      "⠋",
    ],
  },
  "circle-pulse": {
    interval: 120,
    frames: ["◡", "⊙", "◠"],
  },
  clockwork: {
    interval: 100,
    frames: [
      "🕛 ",
      "🕐 ",
      "🕑 ",
      "🕒 ",
      "🕓 ",
      "🕔 ",
      "🕕 ",
      "🕖 ",
      "🕗 ",
      "🕘 ",
      "🕙 ",
      "🕚 ",
    ],
  },
  "dot-circle": {
    interval: 80,
    frames: ["⢎ ", "⠎⠁", "⠊⠑", "⠈⠱", " ⡱", "⢀⡰", "⢄⡠", "⢆⡀"],
  },
  "duo-pulse": {
    interval: 100,
    frames: [
      "🔸 ",
      "🔶 ",
      "🟠 ",
      "🟠 ",
      "🔶 ",
      "🔹 ",
      "🔷 ",
      "🔵 ",
      "🔵 ",
      "🔷 ",
    ],
  },
  "dwarf-fortress": {
    interval: 80,
    frames: [
      " ██████£££  ",
      "☺██████£££  ",
      "☺██████£££  ",
      "☺▓█████£££  ",
      "☺▓█████£££  ",
      "☺▒█████£££  ",
      "☺▒█████£££  ",
      "☺░█████£££  ",
      "☺░█████£££  ",
      "☺ █████£££  ",
      " ☺█████£££  ",
      " ☺█████£££  ",
      " ☺▓████£££  ",
      " ☺▓████£££  ",
      " ☺▒████£££  ",
      " ☺▒████£££  ",
      " ☺░████£££  ",
      " ☺░████£££  ",
      " ☺ ████£££  ",
      "  ☺████£££  ",
      "  ☺████£££  ",
      "  ☺▓███£££  ",
      "  ☺▓███£££  ",
      "  ☺▒███£££  ",
      "  ☺▒███£££  ",
      "  ☺░███£££  ",
      "  ☺░███£££  ",
      "  ☺ ███£££  ",
      "   ☺███£££  ",
      "   ☺███£££  ",
      "   ☺▓██£££  ",
      "   ☺▓██£££  ",
      "   ☺▒██£££  ",
      "   ☺▒██£££  ",
      "   ☺░██£££  ",
      "   ☺░██£££  ",
      "   ☺ ██£££  ",
      "    ☺██£££  ",
      "    ☺██£££  ",
      "    ☺▓█£££  ",
      "    ☺▓█£££  ",
      "    ☺▒█£££  ",
      "    ☺▒█£££  ",
      "    ☺░█£££  ",
      "    ☺░█£££  ",
      "    ☺ █£££  ",
      "     ☺█£££  ",
      "     ☺█£££  ",
      "     ☺▓£££  ",
      "     ☺▓£££  ",
      "     ☺▒£££  ",
      "     ☺▒£££  ",
      "     ☺░£££  ",
      "     ☺░£££  ",
      "     ☺ £££  ",
      "      ☺£££  ",
      "      ☺£££  ",
      "      ☺▓££  ",
      "      ☺▓££  ",
      "      ☺▒££  ",
      "      ☺▒££  ",
      "      ☺░££  ",
      "      ☺░££  ",
      "      ☺ ££  ",
      "       ☺££  ",
      "       ☺££  ",
      "       ☺▓£  ",
      "       ☺▓£  ",
      "       ☺▒£  ",
      "       ☺▒£  ",
      "       ☺░£  ",
      "       ☺░£  ",
      "       ☺ £  ",
      "        ☺£  ",
      "        ☺£  ",
      "        ☺▓  ",
      "        ☺▓  ",
      "        ☺▒  ",
      "        ☺▒  ",
      "        ☺░  ",
      "        ☺░  ",
      "        ☺   ",
      "        ☺  &",
      "        ☺ ☼&",
      "       ☺ ☼ &",
      "       ☺☼  &",
      "      ☺☼  & ",
      "      ‼   & ",
      "     ☺   &  ",
      "    ‼    &  ",
      "   ☺    &   ",
      "  ‼     &   ",
      " ☺     &    ",
      "‼      &    ",
      "      &     ",
      "      &     ",
      "     &   ░  ",
      "     &   ▒  ",
      "    &    ▓  ",
      "    &    £  ",
      "   &    ░£  ",
      "   &    ▒£  ",
      "  &     ▓£  ",
      "  &     ££  ",
      " &     ░££  ",
      " &     ▒££  ",
      "&      ▓££  ",
      "&      £££  ",
      "      ░£££  ",
      "      ▒£££  ",
      "      ▓£££  ",
      "      █£££  ",
      "     ░█£££  ",
      "     ▒█£££  ",
      "     ▓█£££  ",
      "     ██£££  ",
      "    ░██£££  ",
      "    ▒██£££  ",
      "    ▓██£££  ",
      "    ███£££  ",
      "   ░███£££  ",
      "   ▒███£££  ",
      "   ▓███£££  ",
      "   ████£££  ",
      "  ░████£££  ",
      "  ▒████£££  ",
      "  ▓████£££  ",
      "  █████£££  ",
      " ░█████£££  ",
      " ▒█████£££  ",
      " ▓█████£££  ",
      " ██████£££  ",
      " ██████£££  ",
    ],
  },
  earth: {
    interval: 180,
    frames: ["🌍 ", "🌎 ", "🌏 "],
  },
  ellipsis: {
    interval: 400,
    frames: [".  ", ".. ", "...", "   "],
  },
  "ellipsis-scroll": {
    interval: 200,
    frames: [".  ", ".. ", "...", " ..", "  .", "   "],
  },
  fingers: {
    interval: 160,
    frames: ["🤘 ", "🤟 ", "🖖 ", "✋ ", "🤚 ", "👆 "],
  },
  fish: {
    interval: 80,
    frames: [
      "~~~~~~~~~~~~~~~~~~~~",
      "> ~~~~~~~~~~~~~~~~~~",
      "º> ~~~~~~~~~~~~~~~~~",
      "(º> ~~~~~~~~~~~~~~~~",
      "((º> ~~~~~~~~~~~~~~~",
      "<((º> ~~~~~~~~~~~~~~",
      "><((º> ~~~~~~~~~~~~~",
      " ><((º> ~~~~~~~~~~~~",
      "~ ><((º> ~~~~~~~~~~~",
      "~~ <>((º> ~~~~~~~~~~",
      "~~~ ><((º> ~~~~~~~~~",
      "~~~~ <>((º> ~~~~~~~~",
      "~~~~~ ><((º> ~~~~~~~",
      "~~~~~~ <>((º> ~~~~~~",
      "~~~~~~~ ><((º> ~~~~~",
      "~~~~~~~~ <>((º> ~~~~",
      "~~~~~~~~~ ><((º> ~~~",
      "~~~~~~~~~~ <>((º> ~~",
      "~~~~~~~~~~~ ><((º> ~",
      "~~~~~~~~~~~~ <>((º> ",
      "~~~~~~~~~~~~~ ><((º>",
      "~~~~~~~~~~~~~~ <>((º",
      "~~~~~~~~~~~~~~~ ><((",
      "~~~~~~~~~~~~~~~~ <>(",
      "~~~~~~~~~~~~~~~~~ ><",
      "~~~~~~~~~~~~~~~~~~ <",
      "~~~~~~~~~~~~~~~~~~~~",
    ],
  },
  "fist-bump": {
    interval: 80,
    frames: [
      "🤜　　　　🤛 ",
      "🤜　　　　🤛 ",
      "🤜　　　　🤛 ",
      "　🤜　　🤛　 ",
      "　　🤜🤛　　 ",
      "　🤜✨🤛　　 ",
      "🤜　✨　🤛　 ",
    ],
  },
  flipper: {
    interval: 70,
    frames: ["_", "_", "_", "-", "`", "`", "'", "´", "-", "_", "_", "_"],
  },
  grenade: {
    interval: 80,
    frames: [
      "،  ",
      "′  ",
      " ´ ",
      " ‾ ",
      "  ⸌",
      "  ⸊",
      "  |",
      "  ⁎",
      "  ⁕",
      " ෴ ",
      "  ⁓",
      "   ",
      "   ",
      "   ",
    ],
  },
  "grow-h": {
    interval: 120,
    frames: ["▏", "▎", "▍", "▌", "▋", "▊", "▉", "▊", "▋", "▌", "▍", "▎"],
  },
  "grow-v": {
    interval: 120,
    frames: ["▁", "▃", "▄", "▅", "▆", "▇", "▆", "▅", "▄", "▃"],
  },
  "half-orbit": {
    interval: 50,
    frames: ["◐", "◓", "◑", "◒"],
  },
  hearts: {
    interval: 100,
    frames: ["💛 ", "💙 ", "💜 ", "💚 ", "💗 "],
  },
  layer: {
    interval: 150,
    frames: ["-", "=", "≡"],
  },
  "letter-spin": {
    interval: 100,
    frames: ["d", "q", "p", "b"],
  },
  "line-dash": {
    interval: 130,
    frames: ["-", "\\", "|", "/"],
  },
  "line-roll": {
    interval: 80,
    frames: ["/  ", " - ", " \\ ", "  |", "  |", " \\ ", " - ", "/  "],
  },
  "line-slash": {
    interval: 100,
    frames: ["⠂", "-", "–", "—", "–", "-"],
  },
  "material-bar": {
    interval: 17,
    frames: [
      "█▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁",
      "██▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁",
      "███▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁",
      "████▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁",
      "██████▁▁▁▁▁▁▁▁▁▁▁▁▁▁",
      "██████▁▁▁▁▁▁▁▁▁▁▁▁▁▁",
      "███████▁▁▁▁▁▁▁▁▁▁▁▁▁",
      "████████▁▁▁▁▁▁▁▁▁▁▁▁",
      "█████████▁▁▁▁▁▁▁▁▁▁▁",
      "█████████▁▁▁▁▁▁▁▁▁▁▁",
      "██████████▁▁▁▁▁▁▁▁▁▁",
      "███████████▁▁▁▁▁▁▁▁▁",
      "█████████████▁▁▁▁▁▁▁",
      "██████████████▁▁▁▁▁▁",
      "██████████████▁▁▁▁▁▁",
      "▁██████████████▁▁▁▁▁",
      "▁██████████████▁▁▁▁▁",
      "▁██████████████▁▁▁▁▁",
      "▁▁██████████████▁▁▁▁",
      "▁▁▁██████████████▁▁▁",
      "▁▁▁▁█████████████▁▁▁",
      "▁▁▁▁██████████████▁▁",
      "▁▁▁▁██████████████▁▁",
      "▁▁▁▁▁██████████████▁",
      "▁▁▁▁▁██████████████▁",
      "▁▁▁▁▁██████████████▁",
      "▁▁▁▁▁▁██████████████",
      "▁▁▁▁▁▁██████████████",
      "▁▁▁▁▁▁▁█████████████",
      "▁▁▁▁▁▁▁█████████████",
      "▁▁▁▁▁▁▁▁████████████",
      "▁▁▁▁▁▁▁▁████████████",
      "▁▁▁▁▁▁▁▁▁███████████",
      "▁▁▁▁▁▁▁▁▁███████████",
      "▁▁▁▁▁▁▁▁▁▁██████████",
      "▁▁▁▁▁▁▁▁▁▁██████████",
      "▁▁▁▁▁▁▁▁▁▁▁▁████████",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁███████",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁██████",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁█████",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁█████",
      "█▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁████",
      "██▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁███",
      "██▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁███",
      "███▁▁▁▁▁▁▁▁▁▁▁▁▁▁███",
      "████▁▁▁▁▁▁▁▁▁▁▁▁▁▁██",
      "█████▁▁▁▁▁▁▁▁▁▁▁▁▁▁█",
      "█████▁▁▁▁▁▁▁▁▁▁▁▁▁▁█",
      "██████▁▁▁▁▁▁▁▁▁▁▁▁▁█",
      "████████▁▁▁▁▁▁▁▁▁▁▁▁",
      "█████████▁▁▁▁▁▁▁▁▁▁▁",
      "█████████▁▁▁▁▁▁▁▁▁▁▁",
      "█████████▁▁▁▁▁▁▁▁▁▁▁",
      "█████████▁▁▁▁▁▁▁▁▁▁▁",
      "███████████▁▁▁▁▁▁▁▁▁",
      "████████████▁▁▁▁▁▁▁▁",
      "████████████▁▁▁▁▁▁▁▁",
      "██████████████▁▁▁▁▁▁",
      "██████████████▁▁▁▁▁▁",
      "▁██████████████▁▁▁▁▁",
      "▁██████████████▁▁▁▁▁",
      "▁▁▁█████████████▁▁▁▁",
      "▁▁▁▁▁████████████▁▁▁",
      "▁▁▁▁▁████████████▁▁▁",
      "▁▁▁▁▁▁███████████▁▁▁",
      "▁▁▁▁▁▁▁▁█████████▁▁▁",
      "▁▁▁▁▁▁▁▁█████████▁▁▁",
      "▁▁▁▁▁▁▁▁▁█████████▁▁",
      "▁▁▁▁▁▁▁▁▁█████████▁▁",
      "▁▁▁▁▁▁▁▁▁▁█████████▁",
      "▁▁▁▁▁▁▁▁▁▁▁████████▁",
      "▁▁▁▁▁▁▁▁▁▁▁████████▁",
      "▁▁▁▁▁▁▁▁▁▁▁▁███████▁",
      "▁▁▁▁▁▁▁▁▁▁▁▁███████▁",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁███████",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁███████",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁█████",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁████",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁████",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁████",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁███",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁███",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁██",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁██",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁██",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁█",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁█",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁█",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁",
      "▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁",
    ],
  },
  mindblown: {
    interval: 160,
    frames: [
      "😐 ",
      "😐 ",
      "😮 ",
      "😮 ",
      "😦 ",
      "😦 ",
      "😧 ",
      "😧 ",
      "🤯 ",
      "💥 ",
      "✨ ",
      "　 ",
      "　 ",
      "　 ",
    ],
  },
  monkey: {
    interval: 300,
    frames: ["🙈 ", "🙈 ", "🙉 ", "🙊 "],
  },
  "moon-phase": {
    interval: 80,
    frames: ["🌑 ", "🌒 ", "🌓 ", "🌔 ", "🌕 ", "🌖 ", "🌗 ", "🌘 "],
  },
  "orange-pulse": {
    interval: 100,
    frames: ["🔸 ", "🔶 ", "🟠 ", "🟠 ", "🔶 "],
  },
  "pipe-turn": {
    interval: 100,
    frames: ["┤", "┘", "┴", "└", "├", "┌", "┬", "┐"],
  },
  "plus-pulse": {
    interval: 80,
    frames: ["+", "x", "*"],
  },
  point: {
    interval: 125,
    frames: ["∙∙∙", "●∙∙", "∙●∙", "∙∙●", "∙∙∙"],
  },
  pong: {
    interval: 80,
    frames: [
      "▐⠂       ▌",
      "▐⠈       ▌",
      "▐ ⠂      ▌",
      "▐ ⠠      ▌",
      "▐  ⡀     ▌",
      "▐  ⠠     ▌",
      "▐   ⠂    ▌",
      "▐   ⠈    ▌",
      "▐    ⠂   ▌",
      "▐    ⠠   ▌",
      "▐     ⡀  ▌",
      "▐     ⠠  ▌",
      "▐      ⠂ ▌",
      "▐      ⠈ ▌",
      "▐       ⠂▌",
      "▐       ⠠▌",
      "▐       ⡀▌",
      "▐      ⠠ ▌",
      "▐      ⠂ ▌",
      "▐     ⠈  ▌",
      "▐     ⠂  ▌",
      "▐    ⠠   ▌",
      "▐    ⡀   ▌",
      "▐   ⠠    ▌",
      "▐   ⠂    ▌",
      "▐  ⠈     ▌",
      "▐  ⠂     ▌",
      "▐ ⠠      ▌",
      "▐ ⡀      ▌",
      "▐⠠       ▌",
    ],
  },
  "quarter-orbit": {
    interval: 120,
    frames: ["◴", "◷", "◶", "◵"],
  },
  "retro-braille": {
    interval: 80,
    frames: [
      "⠀",
      "⠁",
      "⠂",
      "⠃",
      "⠄",
      "⠅",
      "⠆",
      "⠇",
      "⡀",
      "⡁",
      "⡂",
      "⡃",
      "⡄",
      "⡅",
      "⡆",
      "⡇",
      "⠈",
      "⠉",
      "⠊",
      "⠋",
      "⠌",
      "⠍",
      "⠎",
      "⠏",
      "⡈",
      "⡉",
      "⡊",
      "⡋",
      "⡌",
      "⡍",
      "⡎",
      "⡏",
      "⠐",
      "⠑",
      "⠒",
      "⠓",
      "⠔",
      "⠕",
      "⠖",
      "⠗",
      "⡐",
      "⡑",
      "⡒",
      "⡓",
      "⡔",
      "⡕",
      "⡖",
      "⡗",
      "⠘",
      "⠙",
      "⠚",
      "⠛",
      "⠜",
      "⠝",
      "⠞",
      "⠟",
      "⡘",
      "⡙",
      "⡚",
      "⡛",
      "⡜",
      "⡝",
      "⡞",
      "⡟",
      "⠠",
      "⠡",
      "⠢",
      "⠣",
      "⠤",
      "⠥",
      "⠦",
      "⠧",
      "⡠",
      "⡡",
      "⡢",
      "⡣",
      "⡤",
      "⡥",
      "⡦",
      "⡧",
      "⠨",
      "⠩",
      "⠪",
      "⠫",
      "⠬",
      "⠭",
      "⠮",
      "⠯",
      "⡨",
      "⡩",
      "⡪",
      "⡫",
      "⡬",
      "⡭",
      "⡮",
      "⡯",
      "⠰",
      "⠱",
      "⠲",
      "⠳",
      "⠴",
      "⠵",
      "⠶",
      "⠷",
      "⡰",
      "⡱",
      "⡲",
      "⡳",
      "⡴",
      "⡵",
      "⡶",
      "⡷",
      "⠸",
      "⠹",
      "⠺",
      "⠻",
      "⠼",
      "⠽",
      "⠾",
      "⠿",
      "⡸",
      "⡹",
      "⡺",
      "⡻",
      "⡼",
      "⡽",
      "⡾",
      "⡿",
      "⢀",
      "⢁",
      "⢂",
      "⢃",
      "⢄",
      "⢅",
      "⢆",
      "⢇",
      "⣀",
      "⣁",
      "⣂",
      "⣃",
      "⣄",
      "⣅",
      "⣆",
      "⣇",
      "⢈",
      "⢉",
      "⢊",
      "⢋",
      "⢌",
      "⢍",
      "⢎",
      "⢏",
      "⣈",
      "⣉",
      "⣊",
      "⣋",
      "⣌",
      "⣍",
      "⣎",
      "⣏",
      "⢐",
      "⢑",
      "⢒",
      "⢓",
      "⢔",
      "⢕",
      "⢖",
      "⢗",
      "⣐",
      "⣑",
      "⣒",
      "⣓",
      "⣔",
      "⣕",
      "⣖",
      "⣗",
      "⢘",
      "⢙",
      "⢚",
      "⢛",
      "⢜",
      "⢝",
      "⢞",
      "⢟",
      "⣘",
      "⣙",
      "⣚",
      "⣛",
      "⣜",
      "⣝",
      "⣞",
      "⣟",
      "⢠",
      "⢡",
      "⢢",
      "⢣",
      "⢤",
      "⢥",
      "⢦",
      "⢧",
      "⣠",
      "⣡",
      "⣢",
      "⣣",
      "⣤",
      "⣥",
      "⣦",
      "⣧",
      "⢨",
      "⢩",
      "⢪",
      "⢫",
      "⢬",
      "⢭",
      "⢮",
      "⢯",
      "⣨",
      "⣩",
      "⣪",
      "⣫",
      "⣬",
      "⣭",
      "⣮",
      "⣯",
      "⢰",
      "⢱",
      "⢲",
      "⢳",
      "⢴",
      "⢵",
      "⢶",
      "⢷",
      "⣰",
      "⣱",
      "⣲",
      "⣳",
      "⣴",
      "⣵",
      "⣶",
      "⣷",
      "⢸",
      "⢹",
      "⢺",
      "⢻",
      "⢼",
      "⢽",
      "⢾",
      "⢿",
      "⣸",
      "⣹",
      "⣺",
      "⣻",
      "⣼",
      "⣽",
      "⣾",
      "⣿",
    ],
  },
  runner: {
    interval: 140,
    frames: ["🚶 ", "🏃 "],
  },
  sandglass: {
    interval: 80,
    frames: [
      "⠁",
      "⠂",
      "⠄",
      "⡀",
      "⡈",
      "⡐",
      "⡠",
      "⣀",
      "⣁",
      "⣂",
      "⣄",
      "⣌",
      "⣔",
      "⣤",
      "⣥",
      "⣦",
      "⣮",
      "⣶",
      "⣷",
      "⣿",
      "⡿",
      "⠿",
      "⢟",
      "⠟",
      "⡛",
      "⠛",
      "⠫",
      "⢋",
      "⠋",
      "⠍",
      "⡉",
      "⠉",
      "⠑",
      "⠡",
      "⢁",
    ],
  },
  shark: {
    interval: 120,
    frames: [
      "▐|\\____________▌",
      "▐_|\\___________▌",
      "▐__|\\__________▌",
      "▐___|\\_________▌",
      "▐____|\\________▌",
      "▐_____|\\_______▌",
      "▐______|\\______▌",
      "▐_______|\\_____▌",
      "▐________|\\____▌",
      "▐_________|\\___▌",
      "▐__________|\\__▌",
      "▐___________|\\_▌",
      "▐____________|\\▌",
      "▐____________/|▌",
      "▐___________/|_▌",
      "▐__________/|__▌",
      "▐_________/|___▌",
      "▐________/|____▌",
      "▐_______/|_____▌",
      "▐______/|______▌",
      "▐_____/|_______▌",
      "▐____/|________▌",
      "▐___/|_________▌",
      "▐__/|__________▌",
      "▐_/|___________▌",
      "▐/|____________▌",
    ],
  },
  "smiley-spin": {
    interval: 200,
    frames: ["😄 ", "😝 "],
  },
  soccer: {
    interval: 80,
    frames: [
      " 🧑⚽️       🧑 ",
      "🧑  ⚽️      🧑 ",
      "🧑   ⚽️     🧑 ",
      "🧑    ⚽️    🧑 ",
      "🧑     ⚽️   🧑 ",
      "🧑      ⚽️  🧑 ",
      "🧑       ⚽️🧑  ",
      "🧑      ⚽️  🧑 ",
      "🧑     ⚽️   🧑 ",
      "🧑    ⚽️    🧑 ",
      "🧑   ⚽️     🧑 ",
      "🧑  ⚽️      🧑 ",
    ],
  },
  speaker: {
    interval: 160,
    frames: ["🔈 ", "🔉 ", "🔊 ", "🔉 "],
  },
  "square-corners": {
    interval: 180,
    frames: ["◰", "◳", "◲", "◱"],
  },
  squisher: {
    interval: 100,
    frames: ["╫", "╪"],
  },
  stacker: {
    interval: 100,
    frames: ["☱", "☲", "☴"],
  },
  "static-noise": {
    interval: 100,
    frames: ["▓", "▒", "░"],
  },
  "time-travel": {
    interval: 100,
    frames: [
      "🕛 ",
      "🕚 ",
      "🕙 ",
      "🕘 ",
      "🕗 ",
      "🕖 ",
      "🕕 ",
      "🕔 ",
      "🕓 ",
      "🕒 ",
      "🕑 ",
      "🕐 ",
    ],
  },
  "toggle-1": {
    interval: 250,
    frames: ["⊶", "⊷"],
  },
  "toggle-10": {
    interval: 100,
    frames: ["㊂", "㊀", "㊁"],
  },
  "toggle-11": {
    interval: 50,
    frames: ["⧇", "⧆"],
  },
  "toggle-12": {
    interval: 120,
    frames: ["☗", "☖"],
  },
  "toggle-13": {
    interval: 80,
    frames: ["=", "*", "-"],
  },
  "toggle-2": {
    interval: 80,
    frames: ["▫", "▪"],
  },
  "toggle-3": {
    interval: 120,
    frames: ["□", "■"],
  },
  "toggle-4": {
    interval: 100,
    frames: ["■", "□", "▪", "▫"],
  },
  "toggle-5": {
    interval: 100,
    frames: ["▮", "▯"],
  },
  "toggle-6": {
    interval: 300,
    frames: ["ဝ", "၀"],
  },
  "toggle-7": {
    interval: 80,
    frames: ["⦾", "⦿"],
  },
  "toggle-8": {
    interval: 100,
    frames: ["◍", "◌"],
  },
  "toggle-9": {
    interval: 100,
    frames: ["◉", "◎"],
  },
  tree: {
    interval: 400,
    frames: ["🌲", "🎄"],
  },
  "triangle-spin": {
    interval: 50,
    frames: ["◢", "◣", "◤", "◥"],
  },
  twinkle: {
    interval: 70,
    frames: ["✶", "✸", "✹", "✺", "✹", "✷"],
  },
  weather: {
    interval: 100,
    frames: [
      "☀️ ",
      "☀️ ",
      "☀️ ",
      "🌤 ",
      "⛅️ ",
      "🌥 ",
      "☁️ ",
      "🌧 ",
      "🌨 ",
      "🌧 ",
      "🌨 ",
      "🌧 ",
      "🌨 ",
      "⛈ ",
      "🌨 ",
      "🌧 ",
      "🌨 ",
      "☁️ ",
      "🌥 ",
      "⛅️ ",
      "🌤 ",
      "☀️ ",
      "☀️ ",
    ],
  },
};

export const CLI_SPINNER_VARIANTS = Object.keys(
  CLI_SPINNERS,
) as CliSpinnerVariant[];
```