Build Colorful Command-Line Spinners in Nodejs

Make your CLI tools more fun to use, with colorful spinners

In our last post “Build Spinners in Terminal using Nodejs”, we saw how we can implement spinners in terminal/command-line using Nodejs/JavaScript.

The spinners there were using the default terminal color. In this post, we will see how to make it colorful :rainbow:

Starting and Recap…

Our final code on spinners was this:

and the spinners.json file contained the following effects:

Tip: Easily reuse small modules across your JS projects

Use Bit to easily develop, isolate and publish small modules in your different projects. Don’t install entire libraries and don’t copy-paste code, when you can build faster with small reusable modules. Take a look .

Ramda components: Just collect and reuse components in your projects to build faster

The frames in each object, denotes each picture or frame to be displayed at a particular time. See each frame denotes a moment of rotation.

"frames": [
1.			"-",
2.			"\\",
3.			"|",
4.			"/"
		]

See the frames for the line effect, the first frame 1. shows a moment of spin at a horizontal angle, 2. shows the left diagonal moment, 3. shows the vertical moment, 4. shows the right diagonal moment. Displaying all these four at a rate of 4 frames per 80ms, will show a spinning effect.

That's what the Spinner#spin method does, it collects the frames and the time interval from the spinners.json and uses the setInterval API to display the frames at frame rate of the time interval.

This goes with all effects in the spinners.json .

That’s enough on recap on what we did last time. Now, lets make them colorful.

Coloring the Spinners

To color our spinners is very easy. We know that to color a text/data in terminal using Nodejs, there are color codes and data we need to write to produce a colored data.

Every color has it color code:

"yellow": [33, 89],
"blue": [34, 89],
"green": [32, 89]

We have some colors here, the numbers in array on the right is the number code used to display the color. The first in the array is the background color code and the second is the foreground color code.

To write a data with any of the above colours fisrt we write \x1b[ , the the background color code eg if yellow we put 33 . Then, we add m , followed by the text/data we want colored, then we add \x1b with the foreground color code and last m .

So nnamdi in yellow will be:

\x1b[33mnnamdi\x1b[89m

Now, we have to modify our spin method to include the \xb[ to each spinner frame when it is to be displayed by std.write(now) code.

Also we will add an object of colors with their color codes, we will create a color method in the Spinner class, this will tell the Spinner what color we want displayed on our spinner.

Doing all above we will make our Spinner look like this:

We added an object of colors colors , we added constructor to the Spinner class, the colorTxt object have properties start and stop. The start prop holds the background color code of the selected color and the stop prop holds the foreground color code.

In the spin method, it concatenates the start prop of colorTxt first with the current frame now and concatenates the result with the stop prop of colorTxt .

In the color method, it takes the name of the color in the colorName arg. It gets the color from the colors objects, then calls setColor method.

The setColor method, sets the colorTxt.start prop with the background code of the selected color, see it adds \x1b[ first then the color code and closes with m . It then sets the colorTxt.stop , it first adds the \x1b[ then the background code and ends with m with additional \x1b[0m . This code is a styling code that resets the color to the default terminal color, this is done so that the next data doesn't assume the color of the spinner.

The color method returns an instance of the Spinner which will enable us to chain method calls.

So to display the line effect with yellow color, we will do this:

new Spinner().color("yellow").spin("line")

Easy!!

It will display the line effect in yellow color:

A blue dots effect will be this:

new Spinner().color("blue").spin("dots")

A green dots2 effect will be this

new Spinner().color("green").spin("dots2")

Making a Jacuzzi spinner

You know thw Jacuzzi type of lighting? It displays randoms colors: blue, red, yellow, green, etc at the same time.

We are going to make our spinner give that effect.

Now, we will modify our Spinner class to this:

We only added the randomise method and random flag in the constructor . Calling the randomise in the method call chain, will set the random flag to true, so the randomise method will be called every time the function callback in the setInterval is called. At every call, the randomise method will set a new color in the colorTxt.start and colorTxt.stop props before the std.write(this.colorTxt.start + now + this.colorTxt.stop) statement. This will make different colors display for each frame!! Thus, giving out the jacuzzi effect.

Let’s test it out.

line jacuzzi effect:

new Spinner().randomise().spin("line")

dots jacuzzi effect:

new Spinner().randomise().spin("dots")

dots2 jacuzzi effect:

new Spinner().randomise().spin("dots2")

arc jacuzzi effect:

new Spinner().randomise().spin("arc")

Conclusion

We won!!! :) Adding color to our spinner kinda makes it fancy. Trust me, people like fancy and cool things.

It was very simple, adding color code to the frames did the trick and randomizing the colors again gave us the jacuzzi trick :)

If you have any questions regarding this or anything I should add, correct or remove, feel free to comment, email or DM me.

Thanks !!!