在前端开发中，有时需要展示进度条来展示某个耗时操作的进度。为了方便开发，我们可以使用已有的 npm 包来实现进度条的展示。
其中，node-simple-progress 是一款小巧、易用的 npm 包，同时也具有很高的可拓展性和自定义性。接下来，我们将会详细讲解该 npm 包的使用方法。
安装
安装 node-simple-progress 很简单，只需要在命令行中执行以下命令即可：
npm install --save node-simple-progress
接下来，我们就可以通过 require 的方式在项目中引入它了。
const SimpleProgress = require('node-simple-progress');基本使用
一般来说，我们需要实现一个进度条，都会需要以下几个必要参数：
- 总进度
- 当前进度
- 进度条长度
在 node-simple-progress 中，我们可以通过以下方式创建一个进度条：
const progress = new SimpleProgress(total, current, length);
接着，我们就可以通过 progress.tick() 方法来更新当前进度了。tick 方法可以接收两个参数：
- 当前进度
- 附加信息
progress.tick(10, '任务进行中...');
最后，我们需要将进度条输出到控制台上。
console.log(progress.toString());
至此，我们就成功实现了一个简单的进度条。
进阶使用
除了之前讲到的基本使用，node-simple-progress 还具有更多的使用方法和自定义参数。
自定义符号和颜色
在创建进度条时，我们可以指定进度条的完成符号和未完成符号。同时，还可以为不同状态的进度条指定不同的颜色。
-- -------------------- ---- -------
----- -------- - --- --------------------- -------- ------- -
--------- ----
----------- ----
------ -
--------- --------
----------- --------
-------- --------
-
---显示百分比
若需要在进度条中显示百分比，可以通过以下方式实现：
const progress = new SimpleProgress(total, current, length, {
showPercent: true
});定制进度条模板
当然，我们还可以完全自定义进度条的模板，以及模板中的各个字段。
const progress = new SimpleProgress(total, current, length, {
template: '{bar} {percent}% | {info}'
});上面的模板中，{bar}、{percent}和{info}分别代表进度条、百分比和附加信息。我们可以随意修改这个模板，例如下面的模板：
const progress = new SimpleProgress(total, current, length, {
template: '[{bar}] {percent}%'
});定制事件监听器
node-simple-progress 还支持自定义事件监听器。
progress.on('tick', (data) => {
console.log(data.current, data.total);
});
progress.tick();总结
通过以上介绍，我们不难看出，node-simple-progress 是一个非常优秀且易用的 npm 包，同时它还具有高度可扩展的特性。
在实际开发中，我们应该根据具体的应用场景，选择合适的参数和自定义方法，来快速实现一个美观、实用和高度可定制的进度条。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005540c81e8991b448d1648