Day 21: In the name of Progress! 📈

#webdev #deno #beginners #webadvent

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();

Run it with e.g. deno run -A ./main.ts and enjoy an informative 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();