Node encapsulates a console progress bar plugin

说在前面

You've seen a lot of progress bars on the console, right?？Does everyone know how the progress bar of the console is implemented?？I've been writing a fewnode脚本工具,There is a need for progress display during the period,So I wrote a customizable progress bar plugin,Can be directly imported and configured to use.

插件效果

功能实现

console single line output

这里使用了single-line-logTo realize the console output line,single-line-logis in the console（或流）output on the same line inNode.js模块.When writing a progress bar or displaying status messages during a long operation,此功能非常有用.

• 安装

npm install single-line-log

• 示例代码

var log = require('single-line-log').stdout;
var timer, i = 0;

timer = setInterval(()=>{
    
  log(i++ + ' % loading...');
  if (i > 100 ) {
     
    clearInterval(timer);
    log('100% 加载完成');
  }
},100);

console output colorful

这里使用了chalkto change the console output color,chalkis a color plugin,可以通过chalk.blue(‘hello world’)to change the color of the text,You can make your console output fancy with this plugin.

• 安装

npm install chalk

• 示例代码

const chalk = require('chalk');

console.log(chalk.red('我是红色文字'));
console.log(chalk.green('i am green text'));
console.log(chalk.yellow('i am yellow text'));
console.log(chalk.yellow.bgGreen('I am yellow text with green background'));
console.log(chalk.yellow.bgWhiteBright('I am yellow text with white background'));
console.log(chalk.underline.bgBlue('我有下划线'));
console.log(chalk.green(
  'I am a green line ' +
  chalk.blue.underline.bold('with a blue substring') +
  ' that becomes green again!'
));
const error = chalk.bold.red;
const warning = chalk.hex('#FFA500'); // Orange color
console.log(error('Error!'));
console.log(warning('Warning!'));

具体配置可以参考文档：https://www.npmjs.com/package/chalk

progress bar effect

The effect of the progress bar is mainly achieved through a single line of output,We only need to change the length and scale of the progress bar according to the parameters, numbers and tips,Here we encapsulate it into a class.

初始化配置

Configuration information can be passed in during initialization,The configuration not passed in is the default configuration,具体配置如下

constructor(config = {
     }){
    
    this.initConfig(config);
}
initConfig(config){
    
    const defaultConfig = {
    
        duration: 100,
        current: 0,
        block:'█',
        showNumber:true,
        tip:{
    
            0: '努力加载中……',
            50:'half loaded,不要着急……',
            75:'it will be loaded soon……',
            100:'加载完成'
        },
        color:'blue'
    };
    Object.assign(defaultConfig,config);
    this.config = defaultConfig;
}

Update progress bar status

By passing in the current progress,The state of the progress bar can be modified.

run(current){
    
    const {
    block, duration, tip, color, showNumber} = this.config;
    let tipList = Object.keys(tip).sort((a,b)=> b-a);
    let showTip = tip[0];
    const step = duration / 100;
    const len = Math.floor(current / step);
    for(let i = 0; i < tipList.length; i++){
    
        if(len >= tipList[i]) {
    
            showTip = tip[tipList[i]];
            break;
        }
    }
    singleRowLog(chalk[color](block.repeat(Math.floor(len / 2)),(showNumber ? (len + '% ') : '') + showTip));
    if(len == 100) console.log('');
}

插件说明

配置说明

The current configuration items are as follows,Subsequent expansion can be continued as needed

config = {
    
    duration: 100,  //total progress
    current: 0,     //当前进度
    block:'█',      
    showNumber:true,
    tip:{
    
        0: '努力加载中……',
        50:'half loaded,不要着急……',
        75:'it will be loaded soon……',
        100:'加载完成'
    },
    color:'green'
}

• duration

total progress

• current

current progress

• block

显示块,如下图：

• showNumber

Whether to show the current progress,效果如下图

• tip

Prompts when configuring different progress,here in percent,如下图：

• color

Progress bar and text color,如下图

使用

1、安装依赖

npm install @jyeontu/progress-bar

2、在代码中引用

• 引入依赖

const progressBar = require('@jyeontu/progress-bar');

• 配置信息

const config = {
    
    duration: 100,
    current: 0,
    block:'█',
    showNumber:true,
    tip:{
    
        0: '努力加载中……',
        50:'half loaded,不要着急……',
        75:'it will be loaded soon……',
        100:'加载完成'
    },
    color:'blue'
}

• timer simulation progress

var timer, i = 0;
let progressBarC = new progressBar(config);
timer = setInterval(()=>{
    
    progressBarC.run(i++);
    if (i > 100 ) {
     
        clearInterval(timer);
    }
},100);

3、完整示例代码

// const progressBar = require('./progressBar');
const progressBar = require('@jyeontu/progress-bar');
const config = {
    
    duration: 100,
    current: 0,
    block:'█',
    showNumber:true,
    tip:{
    
        0: '努力加载中……',
        50:'half loaded,不要着急……',
        75:'it will be loaded soon……',
        100:'加载完成'
    },
    color:'blue'
}
var timer, i = 0;
let progressBarC = new progressBar(config);
timer = setInterval(()=>{
    
    progressBarC.run(i++);
    if (i > 100 ) {
     
        clearInterval(timer);
    }
},100);

源码地址

https://gitee.com/zheng_yongtao/node-scripting-tool/tree/master/src/progressBar

说在后面

这里是JYeontu,喜欢算法,GDCPC打过卡;热爱羽毛球,大运会打过酱油.毕业一年,两年前端开发经验,目前担任H5前端开发,算法业余爱好者,有空会刷刷算法题,平时喜欢打打羽毛球 ,也喜欢写些东西,既为自己记录,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解,写错的地方望指出,定会认真改进,在此谢谢大家的支持,我们下文再见.