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

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (1)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more