DEV Community

Cover image for Day 21: In the name of Progress! 📈
Valeria
Valeria

Posted on

2

Day 21: In the name of Progress! 📈

Patience is a virtue and it's much easier to stay patient when you see progress, isn't it? Today I'd like to share with you a library called cli-progress that does exactly that.

Let's install it with e.g. deno add npm:cli-progress and use in a script, e.g. main.ts:

import { SingleBar, Presets } from "cli-progress";
import { scheduler } from "node:timers/promises";

const bar = new SingleBar({}, Presets.shades_classic);

bar.start(5, 0);

for (let i = 0; i < 5; i++) {
  await scheduler.wait(1000);
  bar.update(i + 1);
}

bar.stop();
Enter fullscreen mode Exit fullscreen mode

Run it with e.g. deno run -A ./main.ts and enjoy an informative progress bar:

Progress bar

The library has plenty of other interesting options: e.g. you can customise format, symbols and much more.

Try out this code:

import { Bar } from "cli-progress";
import { scheduler } from "node:timers/promises";

const bar = new Bar({
  barCompleteChar: ":",
  barIncompleteChar: ".",
  fps: 5,
  barsize: 30,
  position: "center",
  format: "[{bar}] {percentage}% | ETA: {eta}s | {value}s/{total}s",
});

bar.start(5, 0);

for (let i = 0; i < 5; i++) {
  await scheduler.wait(1000);
  bar.update(i + 1);
}

bar.stop();
Enter fullscreen mode Exit fullscreen mode

Here's what it results in:

Progress bar with specified parameters

Liked the content and would love to have more of it all year long?

Buy Me A Coffee

Sentry workshop image

Sick of your mobile apps crashing?

Let Simon Grimm show you how to fix them without the guesswork. Join the workshop and get to debugging.

Save your spot →

Top comments (1)