expo-agent-spinners

54 terminal-style agent-like spinners for React Native & Expo. Lightweight, zero native dependencies — just Text and setInterval. No heavy UI threads

Inspiration from

Preview

Braille, ASCII, arrow, and emoji spinners all in one place, ready to drop into any loading state, AI agent stream, or CLI-style UI.

Installation

You can copy any spinner you need from the src/components/spinners directory for use in your project.

Usage

Import the component you need:

import { DotsSpinner } from "./src/components/spinners/dots";

export default function Loading() {
  return ;
}

Container sizing

Spinners render Unicode characters whose pixel width depends on font rendering. To prevent layout overflow or shifting, always wrap spinners in a fixed-size container:

// ✅ Recommended — fixed container keeps layout stable

  

// ✅ Also works — pass style directly to the spinner

// ⚠️ Multi-character spinners (dots12, wave, scan, etc.) are wider —
//    use a wider fixed container to avoid clipping

  

Suggested container sizes by character count:

| Spinner type | Characters | Recommended width | |---|---|---| | Single char (dots, moon, arc…) | 1 | 40 | | Two chars (dots12, wave, scan…) | 2 | 64 | | Three+ chars (point, columns…) | 3–4 | 80–96 |

Props

All spinners share the same interface:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 24 | Font size of the spinner character | | color | string | "#fff" | Color of the spinner | | style | StyleProp | — | Style for the outer container |

Available Spinners

Braille (32)

| Name | Import | |------|--------| | dots | DotsSpinner | | dots2 | Dots2Spinner | | dots3 | Dots3Spinner | | dots4 | Dots4Spinner | | dots5 | Dots5Spinner | | dots6 | Dots6Spinner | | dots7 | Dots7Spinner | | dots8 | Dots8Spinner | | dots9 | Dots9Spinner | | dots10 | Dots10Spinner | | dots11 | Dots11Spinner | | dots12 | Dots12Spinner | | dots13 | Dots13Spinner | | dots14 | Dots14Spinner | | sand | SandSpinner | | bounce | BounceSpinner | | dots_circle | DotsCircleSpinner | | wave | WaveSpinner | | scan | ScanSpinner | | rain | RainSpinner | | pulse | PulseSpinner | | snake | SnakeSpinner | | sparkle | SparkleSpinner | | cascade | CascadeSpinner | | columns | ColumnsSpinner | | orbit | OrbitSpinner | | breathe | BreatheSpinner | | waverows | WaveRowsSpinner | | checkerboard | CheckerboardSpinner | | helix | HelixSpinner | | fillsweep | FillSweepSpinner | | diagswipe | DiagSwipeSpinner |

ASCII (15)

| Name | Import | |------|--------| | dqpb | DqpbSpinner | | rolling_line | RollingLineSpinner | | simple_dots | SimpleDotsSpinner | | simple_dots_scrolling | SimpleDotsScrollingSpinner | | arc | ArcSpinner | | balloon | BalloonSpinner | | circle_halves | CircleHalvesSpinner | | circle_qua