Introduction to cli-progress

The cli-progress library is a versatile and powerful tool for creating progress bars in the command line interface (CLI). It is designed to be straightforward yet highly customizable, making it easy to integrate and use in your projects. In this guide, we’ll walk you through the essentials of cli-progress, featuring numerous examples to demonstrate its capabilities. Let’s get started!

Basic Usage

To get started with cli-progress, you need to install it using npm:

npm install cli-progress

Here’s a simple example that shows how to create a basic progress bar:

const cliProgress = require('cli-progress');

const bar1 = new cliProgress.SingleBar({}, cliProgress.Presets.shades_classic);
bar1.start(200, 0);

let value = 0;
const timer = setInterval(() => {
    value++;
    bar1.update(value);

    if (value >= bar1.getTotal()) {
        clearInterval(timer);
        bar1.stop();
    }
}, 100);

Customizing the Progress Bar

The cli-progress library comes with many options to customize the appearance and behavior of the progress bars. Below are some examples:

Changing the Preset

const bar2 = new cliProgress.SingleBar({}, cliProgress.Presets.legacy);
bar2.start(200, 0);

let value2 = 0;
const timer2 = setInterval(() => {
    value2++;
    bar2.update(value2);

    if (value2 >= bar2.getTotal()) {
        clearInterval(timer2);
        bar2.stop();
    }
}, 100);

Customizing the Bar Format

const bar3 = new cliProgress.SingleBar({
    format: 'Progress |{bar}| {percentage}% || {value}/{total} Chunks'
}, cliProgress.Presets.shades_grey);
bar3.start(200, 0);

let value3 = 0;
const timer3 = setInterval(() => {
    value3++;
    bar3.update(value3);

    if (value3 >= bar3.getTotal()) {
        clearInterval(timer3);
        bar3.stop();
    }
}, 100);

Handling Multiple Progress Bars

The library also supports handling multiple progress bars simultaneously. Here’s how you can do it:

const multibar = new cliProgress.MultiBar({
    clearOnComplete: false,
    hideCursor: true
}, cliProgress.Presets.shades_classic);

const b1 = multibar.create(100, 0);
const b2 = multibar.create(200, 0);

const timer = setInterval(() => {
    b1.increment();
    b2.increment();
    
    if (b1.value >= b1.getTotal() && b2.value >= b2.getTotal()) {
        clearInterval(timer);
        multibar.stop();
    }
}, 100);

An Application Example

To put everything into a practical context, let’s build a simple file download simulator that uses multiple progress bars to show the progress of different file downloads.

const cliProgress = require('cli-progress');
const fs = require('fs');

const files = [
    {name: 'File 1', size: 120},
    {name: 'File 2', size: 80},
    {name: 'File 3', size: 200}
];

const multibar = new cliProgress.MultiBar({
    clearOnComplete: false,
    hideCursor: true,
    format: ' {bar} | {filename} | {percentage}% | {value}/{total}'
}, cliProgress.Presets.shades_classic);

files.forEach(file => {
    const bar = multibar.create(file.size, 0, {filename: file.name});
    
    const timer = setInterval(() => {
        bar.increment();
        if (bar.value >= bar.getTotal()) {
            clearInterval(timer);
        }
    }, 100);
});

process.on('SIGINT', () => {
    multibar.stop();
    console.log('\nProcess terminated');
    process.exit(0);
});

By using this approach, you can visualize the progress of multiple asynchronous tasks simultaneously, which is particularly useful for file downloads, data migrations, or any other task that involves monitoring the progress of multiple items.

Conclusion

The cli-progress library is an invaluable tool for any developer looking to enhance their command line interface. By offering a wide array of customization options and supporting multiple progress bars, it makes tracking progress a breeze. So give it a try in your next project to see how it can make your CLI more interactive and informative!

Hash: 7e6e371fa415451645d785e7955586d3d881afded6cd7bf758ed146fc25acef2