Getting Started

import { ProgressBar } from "@visulima/progress-bar";

const bar = new ProgressBar({ total: 100 });

bar.update(25);
console.log(bar.render());
// progress [██████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░] 25% | ETA: 3s | 25/100

bar.update(100);
console.log(bar.render());
// progress [████████████████████████████████████████] 100% | ETA: 0s | 100/100

const bar = new ProgressBar(
    {
        total: 200,
        format: "{task} [{bar}] {percentage}% | {value}/{total}",
    },
    undefined,
    { task: "Downloading" },
);

bar.update(100);
console.log(bar.render());
// Downloading [████████████████████░░░░░░░░░░░░░░░░░░░░] 50% | 100/200

// ASCII style
const ascii = new ProgressBar({ total: 100, style: "ascii", format: "[{bar}]", width: 20 });
ascii.update(50);
console.log(ascii.render()); // [##########----------]

// Braille style with pill caps
const braille = new ProgressBar({ total: 100, style: "braille", format: "[{bar}]", width: 20 });
braille.update(50);
console.log(braille.render()); // [⢾⣿⣿⣿⣿⣿⣿⣿⣿⣿⠤⠤⠤⠤⠤⠤⠤⠤⠤⡷]

pnpm add @visulima/interactive-manager

import { InteractiveManager, InteractiveStreamHook } from "@visulima/interactive-manager";
import { ProgressBar } from "@visulima/progress-bar";

const stdoutHook = new InteractiveStreamHook(process.stdout);
const stderrHook = new InteractiveStreamHook(process.stderr);
const manager = new InteractiveManager(stdoutHook, stderrHook);

const bar = new ProgressBar({ total: 100 }, manager);
bar.start();

// Progress updates render automatically
for (let i = 0; i <= 100; i++) {
    bar.update(i);
    await new Promise((r) => setTimeout(r, 50));
}

bar.stop();