ProgressBar

ProgressBar in terminal

Usage

Simple progress bar

Example

import { progress } from '@ryweal/progress'

const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
const p = progress('Progress | [[bar]] | [[count]]/[[total]] [[rate]] [[eta]]\n', { total: 5 });

for (let i=0;i<5;i++) {
    p.next();
    await delay(200);
}

Progress | [====================] | 2/2 9.723/s 0.206s

Template

[[bar]] Progress bar

[[count]] Current state

[[total]] Expected end state

[[rate]] Number of element processed by second

[[eta]] Number of seconds elapsed since progress bar start

{{custom}} Custom values

Customisation

Example

const url = 'https://geo.mirror.pkgbuild.com/iso/2024.05.01/archlinux-2024.05.01-x86_64.iso';
const response = await fetch(url)
const reader = response.body!.getReader();
const size = +(response.headers.get('content-length') ?? 0);
const p = progress('Downloading [[bar]] [[count]]/[[total]] [[rate]] [[eta]] {{url}}\n', {
    total: size,
    unit: 'MB',
    unitScale: 1024*1024,
    shape: {
        bar: {
            start: '|',
            end: '|',
            completed: '█',
            pending: ' '
        },
        total: { mask: '###.##' },
        count: { mask: '###.##' },
    },
    initialValues: {
        url
    }
});

p.error();
while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    p.next(value.length);
}

Downloading |████████            | 378.83MB/1078.32MB 54.794MB/s 6.914s https://geo.mirror.pkgbuild.com/iso/2024.05.01/archlinux-2024.05.01-x86_64.iso

Multiple progress bars

Example

import { progress, mprogress } from '@ryweal/progress'

const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
const p1 = progress('Progress 1 | [[bar]] | [[count]]/[[total]] [[rate]] [[eta]]', { total: 5 });
const p2 = progress('Progress 2 | [[bar]] | [[count]]/[[total]] [[rate]] [[eta]]\n', { total: 5 });
const p3 = progress('Progress 3 | [[bar]] | [[count]]/[[total]] [[rate]] [[eta]]', { total: 5 });
const p4 = progress('Progress 4 | [[bar]] | [[count]]/[[total]] [[rate]] [[eta]]\n', { total: 5 });

const bars = [p1,p2,p3,p4]
mprogress(bars)

bars.forEach(bar => bar.start())
for (let i=0; i<5; i++) {
    bars.forEach(bar => bar.next())
    await delay(200);
}

Progress 1 | [====================] | 5/5 6.175/s 0.810s Progress 2 | [====================] | 5/5 6.174/s 0.810s
Progress 3 | [====================] | 5/5 6.174/s 0.810s Progress 4 | [====================] | 5/5 6.174/s 0.810s

Colors

type ColorFunction = (value: string) => string
type ColorValue =ColorFunction | {
    default?: ColorFunction
    error?: ColorFunction
    terminated?: ColorFunction
}

Progress bar can have 3 state default, error, or terminated You can apply color for each progress bar component for each state

Example

import { progress } from '@ryweal/progress'
import chalk from 'chalk'

const p = progress('Progress | [[bar]] | [[count]]/[[total]] [[rate]] [[eta]]\n', {
    total: 5,
    color: {
        terminated: chalk.green,
        error: chalk.red,
    },
    shape: {
        bar: {
            color: chalk.bgBlack.blue
        }
    }
});
p.error();

Interface

Progress

interface Progress {
    start(): void
    update(count: number, values?: Record<string, string | number>): void
    next(completed?: number, values?: Record<string, string | number>): void
    error(): void
}

start: Start progress timer

update: Set count and values

next: Add completed to the current count, if undefined add 1 and update values

error: Set progress state to error. State error will be removed by calling next or update