How to make console progress bar with Node.js

3 min readSep 19, 2024

Console progress bars are one of the most common visual effects we encounter in programming. Today, I will show you how to create a simple progress bar with Node.js. Let’s get started!

The first thing we need to do is set up the preparatory work for our effect. We don’t need to create an entire program; our goal is simply to demonstrate how to create a progress bar effect. So, we’ll use a time interval function as mock work to simulate a long-running process.

3-Second Mock Work Setup

const waitTime = 3000;
const timerFinished = () => {
    clearInterval(interval); // this code dosen't work yet.
    console.log("\n");
    console.log("done");
}

setTimeout(timerFinished, waitTime);

This is the first chunk of the code. It is a simple setTimeout logic in Javascript. At the moment, the clearInterval() is not operational yet. If you want to test 3 second time out, you can comment out that line.

Interval Setup

const waitInterval = 100;
let currentTime = 0;
const incTime = () => {
    currentTime += waitInterval;
    const progressPercentage = Math.floor(currentTime / waitTime * 100) ;
    process.stdout.clearLine();
    process.stdout.cursorTo(0);
    process.stdout.write(`Progress: ${progressPercentage}%`);
}

const interval = setInterval(incTime, waitInterval);

Now, let's look at the setInterval(). I’ve set the wait interval to 100 milliseconds. And I’m using the process module to output the progress message. This approach allows us to create single-line changing message. Like below.

single-line changing message with Progress Module

process.stdout is very useful for creating console message. If you want to learn more about it, check out my previous post.

Drawing the Progress Bar Image

Now for the most important part! We can draw the bar image with an interval timer. I’m using the simple string.repeat() method to create the progress bar. This method allows us to repeat a string a specified number of times, which is perfect for visualizing the progress as it increases."

const drawProgressBar = (progress) => {
    const barWidth = 30;
    const filledWidth = Math.floor(progress / 100 * barWidth);
    const emptyWidth = barWidth - filledWidth;
    const progressBar = '█'.repeat(filledWidth) + '▒'.repeat(emptyWidth);
    return `[${progressBar}] ${progress}%`;
}

With this final part of our code in place, we can now integrate all the components together.

Complete version


// 3-Second Mock Work Setup
const waitTime = 3000;

const timerFinished = () => {
    clearInterval(interval);
    console.log("\n")
    console.log("done");
}

setTimeout(timerFinished, waitTime);

// Drawing the Progress Bar Image
const drawProgressBar = (progress) => {
    const barWidth = 30;
    const filledWidth = Math.floor(progress / 100 * barWidth);
    const emptyWidth = barWidth - filledWidth;
    const progressBar = '█'.repeat(filledWidth) + '▒'.repeat(emptyWidth);
    return `[${progressBar}] ${progress}%`;
}

// Interval Setup
const waitInterval = 100;
let currentTime = 0;
const incTime = () => {
    currentTime += waitInterval;
    const progressPercentage = Math.floor(currentTime / waitTime * 100) ;
    process.stdout.clearLine();
    process.stdout.cursorTo(0);
    process.stdout.write(`Progress: ${drawProgressBar(progressPercentage)}`);
}

const interval = setInterval(incTime, waitInterval);