unicode-animations

유니코드 스피너 애니메이션을 원시 프레임 데이터로 제공 — 의존성 없음, 어디서나 작동.

데모

실시간으로 애니메이션되는 18개의 모든 스피너 보기:

npx unicode-animations --web     # open browser demo
npx unicode-animations           # cycle through all in terminal
npx unicode-animations helix     # preview a specific spinner
npx unicode-animations --list    # list all spinners

설치

npm install unicode-animations

빠른 시작

// ESM
import spinners from 'unicode-animations';
// CJS
const spinners = require('unicode-animations');

예제

CLI 도구 — 비동기 작업 중 스피너 표시

import spinners from 'unicode-animations';
const { frames, interval } = spinners.braille;
let i = 0;
const spinner = setInterval(() => {
  process.stdout.write(\r\x1B[2K  ${frames[i++ % frames.length]} Deploying to production...);
}, interval);
await deploy();
clearInterval(spinner);
process.stdout.write('\r\x1B[2K  ✔ Deployed.\n');

재사용 가능한 스피너 도우미

import spinners from 'unicode-animations';
function createSpinner(msg, name = 'braille') {
  const { frames, interval } = spinners[name];
  let i = 0, text = msg;
  const timer = setInterval(() => {
    process.stdout.write(\r\x1B[2K  ${frames[i++ % frames.length]} ${text});
  }, interval);
  return {
    update(msg) { text = msg; },
    stop(msg) { clearInterval(timer); process.stdout.write(\r\x1B[2K  ✔ ${msg}\n); },
  };
}
const s = createSpinner('Connecting to database...');
const db = await connect();
s.update(Running ${migrations.length} migrations...);
await db.migrate(migrations);
s.stop('Database ready.');

다단계 파이프라인

import spinners from 'unicode-animations';
async function runWithSpinner(label, fn, name = 'braille') {
  const { frames, interval } = spinners[name];
  let i = 0;
  const timer = setInterval(() => {
    process.stdout.write(\r\x1B[2K  ${frames[i++ % frames.length]} ${label});
  }, interval);
  const result = await fn();
  clearInterval(timer);
  process.stdout.write(\r\x1B[2K  ✔ ${label}\n);
  return result;
}
await runWithSpinner('Linting...', lint, 'scan');
await runWithSpinner('Running tests...', test, 'helix');
await runWithSpinner('Building...', build, 'cascade');
await runWithSpinner('Publishing...', publish, 'braille');

리액트 컴포넌트

import { useState, useEffect } from 'react';
import spinners from 'unicode-animations';
function Spinner({ name = 'braille', children }) {
  const [frame, setFrame] = useState(0);
  const s = spinners[name];
  useEffect(() => {
    const timer = setInterval(
      () => setFrame(f => (f + 1) % s.frames.length),
      s.interval
    );
    return () => clearInterval(timer);
  }, [name]);
  return {s.frames[frame]} {children};
}
// Usage: Generating response...

브라우저 — 상태 표시기

import spinners from 'unicode-animations';
const el = document.getElementById('status');
const { frames, interval } = spinners.orbit;
let i = 0;
const spinner = setInterval(() => {
  el.textContent = ${frames[i++ % frames.length]} Syncing...;
}, interval);
await sync();
clearInterval(spinner);
el.textContent = '✔ Synced';

모든 스피너

클래식 점자

| 이름 | 미리보기 | 간격 | |------|---------|----------| | braille | ⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏ | 80ms | | braillewave | ⠁⠂⠄⡀ → ⠂⠄⡀⢀ | 100ms | | dna | ⠋⠉⠙⠚ → ⠉⠙⠚⠒ | 80ms |

격자 애니메이션 (점자)

| 이름 | 프레임 | 간격 | |------|--------|----------| | scan | 10 | 70ms | | rain | 12 | 100ms | | scanline | 6 | 120ms | | pulse | 5 | 180ms | | snake | 16 | 80ms | | sparkle | 6 | 150ms | | cascade | 12 | 60ms | | columns | 26 | 60ms | | orbit | 8 | 100ms | | breathe | 17 | 100ms | | waverows | 16 | 90ms | | checkerboard | 4 | 250ms | | helix | 16 | 80ms | | fillsweep | 11 | 100ms | | diagswipe | 16 | 60ms |

맞춤형 스피너

격자 유틸리티를 사용하여 나만의 점자 스피너를 만들어 보세요:

import { gridToBraille, makeGrid } from 'unicode-animations';
// Create a 4-row × 4-col grid
const grid = makeGrid(4, 4);
grid[0][0] = true;
grid[1][1] = true;
grid[2][2] = true;
grid[3][3] = true;
console.log(gridToBraille(grid)); // diagonal braille pattern

makeGrid(rows, cols) returns a boolean[][]. Set cells to true to raise dots. gridToBraille(grid) converts it to a braille string (2 dot-columns per character).

API

Spinner

interface Spinner {
  readonly frames: readonly string[];
  readonly interval: number;
}

'unicode-animations'의 내보내기

| 내보내기 | 타입 | |--------|------| | default / spinners | Record | | gridToBraille(grid) | (boolean[][]) => string | | makeGrid(rows, cols) | (number, number) => boolean[][] | | Spinner | TypeScript 인터페이스 | | BrailleSpinnerName | 18개 스피너 이름의 유니언 타입 |

'unicode-animations/braille'의 내보내기

위와 동일 — 주요 진입점에서 braille 모듈의 모든 것을 재내보냄.

라이선스

MIT

--- Tranlated By Open Ai Tx | Last indexed: 2026-04-03 ---