sindresorhus / cli-spinners

Spinners for use in the terminal

cli-spinners

70+ spinners for use in the terminal

The list of spinners is just a JSON file and can be used wherever.

You probably want to use one of these spinners through the ora module.

Install

npm install cli-spinners

Usage

const cliSpinners = require('cli-spinners');

console.log(cliSpinners.dots);
/*
{
	interval: 80,
	frames: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
}
*/

Preview

The header GIF is outdated. See all the spinner at once or one at the time.

API

Each spinner comes with a recommended interval and an array of frames.

See the spinners.

The random spinner will return a random spinner each time it's called.

Related

• ora - Elegant terminal spinner
• CLISpinner - Terminal spinners for Swift
• py-spinners - Python port
• spinners - Terminal spinners for Rust
• go-spinners - Go port

cli-spinners's Issues

2.6.1 broke semver contract

I am a bit confused by the results I am seeing between v2.6.0 and v2.6.1, the changes seem simple enough, yet I am having an issue with ink-spinners now that cli-spinners resolves to version 2.6.1..

 ERROR  Cannot read property 'hamburger' of undefined

 node_modules/ink-spinner/build/index.js:12:43

  9:  */
 10: const Spinner = ({ type = 'dots' }) => {
 11:     const [frame, setFrame] = react_1.useState(0);
 12:     const spinner = cli_spinners_1.default[type];
 13:     react_1.useEffect(() => {
 14:         const timer = setInterval(() => {
 15:             setFrame(previousFrame => {

If I force a resolution to cli-spinners 2.6.0, this error goes away, if it installes 2.6.1 I get this error every time.... 🤷

Latest spinners aren't defined in TypeScript

I was trying to use one of the newest (emoji) spinners from #46 but since I'm using a TypeScript project, the index.d.ts doesn't list them as valid values, and my code kept failing ☹️.

Will create a PR in a moment to fix this, if it is accepted.

Binary Dots

I made a braille spinner for a personal project, which maps the bits of 8-bit numbers to braille cells, and uses them to count up from 0 to 255. The mapping makes the left column change quickly and the right column change slowly in an appealing way.

Would you be interested in adding it to CLI spinners? I would have just opened a PR, but you already have a lot of dots, and it's quite a large spinner, so I wanted to ask first.

Love the project!

/// The tick chars are from the
/// [Braille Patterns unicode block](https://en.wikipedia.org/wiki/Braille_Patterns).
///
/// The chars are ordered to represent the 8 bit numbers in increasing
/// order. The individual braille cells represent bits, with empty cells
/// representing `0` and full cells representing `1`.
///
/// Digits are ordered from least significant to most significant from
/// top to bottom, and then left to right, like so:
///
/// ```
/// ╔═════╗
/// ║ 0 4 ║
/// ║ 1 5 ║
/// ║ 2 6 ║
/// ║ 3 7 ║
/// ╚═════╝
/// ```
pub(crate) const TICK_CHARS: &str = concat!(
  "⠀⠁⠂⠃⠄⠅⠆⠇⡀⡁⡂⡃⡄⡅⡆⡇", // 0b0000----
  "⠈⠉⠊⠋⠌⠍⠎⠏⡈⡉⡊⡋⡌⡍⡎⡏", // 0b0001----
  "⠐⠑⠒⠓⠔⠕⠖⠗⡐⡑⡒⡓⡔⡕⡖⡗", // 0b0010----
  "⠘⠙⠚⠛⠜⠝⠞⠟⡘⡙⡚⡛⡜⡝⡞⡟", // 0b0011----
  "⠠⠡⠢⠣⠤⠥⠦⠧⡠⡡⡢⡣⡤⡥⡦⡧", // 0b0100----
  "⠨⠩⠪⠫⠬⠭⠮⠯⡨⡩⡪⡫⡬⡭⡮⡯", // 0b0101----
  "⠰⠱⠲⠳⠴⠵⠶⠷⡰⡱⡲⡳⡴⡵⡶⡷", // 0b0110----
  "⠸⠹⠺⠻⠼⠽⠾⠿⡸⡹⡺⡻⡼⡽⡾⡿", // 0b0111----
  "⢀⢁⢂⢃⢄⢅⢆⢇⣀⣁⣂⣃⣄⣅⣆⣇", // 0b1000----
  "⢈⢉⢊⢋⢌⢍⢎⢏⣈⣉⣊⣋⣌⣍⣎⣏", // 0b1001----
  "⢐⢑⢒⢓⢔⢕⢖⢗⣐⣑⣒⣓⣔⣕⣖⣗", // 0b1010----
  "⢘⢙⢚⢛⢜⢝⢞⢟⣘⣙⣚⣛⣜⣝⣞⣟", // 0b1011----
  "⢠⢡⢢⢣⢤⢥⢦⢧⣠⣡⣢⣣⣤⣥⣦⣧", // 0b1100----
  "⢨⢩⢪⢫⢬⢭⢮⢯⣨⣩⣪⣫⣬⣭⣮⣯", // 0b1101----
  "⢰⢱⢲⢳⢴⢵⢶⢷⣰⣱⣲⣳⣴⣵⣶⣷", // 0b1110----
  "⢸⢹⢺⢻⢼⢽⢾⢿⣸⣹⣺⣻⣼⣽⣾⣿", // 0b1111----
);

your terminal is so cool，how can i get it?

in the README.MD file images

create an asciicast

Compared to a GIF, an asciicast has a few advantages:

• It can be paused.
• It is a lot smaller than a GIF showing 50 spinners.
• It can be copied & pasted.
• It could be generated automatically on every release/push using an npm script.

I'd love to contribute an asciicast to the readme.

Extra space after emoji spinners in macOS High Sierra Terminal

In the Terminal, since macOS High Sierra there is one more space after emoji spinners:

support for deno

Hi, do you have any plans to add support for deno? :)
I tried, it seems very simple, just create mod.ts.
Can I create a PR for this?

master...KeJunMao:master

# example-all
deno run https://raw.githubusercontent.com/KeJunMao/cli-spinners/master/example-all.ts
# example args[0] spinnersType
deno run https://raw.githubusercontent.com/KeJunMao/cli-spinners/master/example.ts dots

deno does not support importing JSON

Switch from json to js

Kind of inspired by #42, I figured it would be nice if the spinners file would be in js, so theoretical extremely long spinners could be written programmatically. Sure, one would lose the ability to use the json file everywhere, but honestly the advantages of using js here seem bigger than that one disadvantage.

ERR_REQUIRE_ESM; cant import ora

Using typescript with CommonJS modules.

Can't import ora regularly or with dynamic import

Error [ERR_REQUIRE_ESM]: require() of ES Module ...\node_modules\ora\index.js from path/to/myfile.js not supported.
Instead change the require of index.js in path/to/myfile.js to a dynamic import() which is available in all CommonJS modules.

  code: 'ERR_REQUIRE_ESM'

node v 20.1

Binary missing?

Should there be a binary link for the cli version?

  "bin": {
    "spinners": "index.js"
  },

Bundle TypeScript definitions with package.

For people using this package in a TS project it would be helpful to have definitions. Since the repository is so simple, I suggest putting the definitions directly in the main repository instead of creating a separate DefinitelyTyped package.

I'll probably just fork the repository right now and submit a pull request.

I followed the guide, but it's just loading the object array

Like the title says. Are there other dependencies for getting this to work? I'm still kind of new to js.

Multi-line pong loader

Would it be possible to have a pong loader ? Something on multiple lines probably

This should be easy to represent in ASCII. I don't think that we need the scores, just the ball bouncing off from left to right to left., and not in a straight line, but moving like it is moving in pong (up, down, ...).

It would probably look like "bouncingBall" but on multiple lines, with a few different patterns to make it look like a "real" pong game.

Missing `main` field

Hi. I was curious if the main field was not included purposefully? It seems to be causing issues with typescript@next's ESM handling, as it is a little more strict on where it looks for types. That is experimental behaviour so I just wanted to open the discussion of adding a main field as that should not cause issues for CJS or ESM but will fix the type resolution from ora when using typescript@next alonside the new "module": "nodenext" option.

Bring examples into accordance with the latest version of xo

Running the npm test currently results in two errors having to do with xo 's preference to use destructuring.

Referencing Travis output from a pull request #35
https://travis-ci.org/sindresorhus/cli-spinners/jobs/407862288#L1577-L1589

marquee spinner feature?

So my use case was to make a little scrolling marquee, which was fine and very easy to hard code the frames how I wanted (for use in ora).

But I was wondering if it would be a useful addition to have a marquee spinner, where it would take a given text, and then generate the frames needed to make it scroll like a marquee.

If others would like something like this, I'd be more than willing to make it and submit the PR.
If you think it doesn't really matter and that people can just make their own marquee by hand like I did, then that's cool too. You can just close this issue then.

Thanks for the great tools sindresorhus.

*Edit: The marquee should probably scroll the other way...

example-all.js seems throw an exception

I execute the example-all.js by the following command:

node example-all.js

and after aesthetic is finished, it shows:

TypeError: Cannot read property 'length' of undefined
    at showNextSpinner (/home/mint/project/cli-spinners/example-all.js:26:74)
    at ReadStream.<anonymous> (/home/mint/project/cli-spinners/example-all.js:46:4)
    at ReadStream.emit (node:events:365:28)
    at emitKeys (node:internal/readline/utils:358:14)
    at emitKeys.next (<anonymous>)
    at ReadStream.onData (node:readline:1281:36)
    at ReadStream.emit (node:events:365:28)
    at addChunk (node:internal/streams/readable:314:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at ReadStream.Readable.push (node:internal/streams/readable:228:10)

Compiled file

v2.6.0

typescript file:

import spinners from 'cli-spinners';
import * as ora from 'ora';

export function spinner(text: string) {
  return ora({ spinner: spinners.arc, text }).start();
}

compiled file:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.spinner = void 0;
const cli_spinners_1 = require("cli-spinners");
const ora = require("ora");
function spinner(text) {
    return ora({ spinner: cli_spinners_1.default.arc, text }).start(); //error
}
exports.spinner = spinner;

why is this happening? default.arc doesn't exist

Improve spinner naming

Naming is hard. I could use some help improving the name of each spinner. Especially those that are numbered should preferably be split up into something more unique.

https://github.com/sindresorhus/cli-spinners/blob/master/spinners.json

Make `example-all.js` show each spinner the same amount of time

Currently it only shows each frame of a spinner, which is fine for those with many frames, but this doesn't work very well for spinners with few frames. Ideally it should show each spinner equally long.

A pull request would be appreciated :)

https://github.com/sindresorhus/cli-spinners/blob/055d22444bfb7bc718853c2183c8750402ebd2d9/example-all.js

Add scrolling dots

It would be good to see a variation of the simpleDots spinner that continues scrolling.