在前端开发中，进度条是常见的 UI 组件之一。而 npm 包 shower-progress 则提供了一种方便快捷的方式来生成进度条并集成到你的项目中。本文将详细介绍该 npm 包的使用教程。
安装
可以通过 npm 在命令行中安装 shower-progress 包：
npm install shower-progress --save
引入
在项目中引入 shower-progress.js 文件，可以使用 ES6 模块化的方式：
import ShowerProgress from 'shower-progress';
或者，简单地以传统方式使用 script 标记：
<script src="node_modules/shower-progress/dist/shower-progress.js"></script>
使用
要使用 shower-progress 包，首先必须创建一个父 div 元素来容纳进度条，并定义进度条的初始值：
<div class="progress-parent"> <div class="progress-bar" style="width: 0;">0%</div> </div>
接下来，将父 div 元素传递给 ShowerProgress 的构造函数，即可创建一个新的进度条实例：
const progress = new ShowerProgress('.progress-parent');至此，你已经成功创建一个进度条实例！但是，现在它只是一个静态的条形元素。要使其完全工作，我们需要在代码中更新其值。
API
progress.inc(amount)
将进度条的当前值增加传入的值。默认值为 1。如果当前的进度达到了 100%，那么调用此方法不会再导致进度条增长。
progress.set(amount)
将进度条的当前值设置为传入的值。如果传入的值小于进度条的当前值，那么进度条将在原地等待更新。如果传入一个大于或等于 1、小于或等于 100 的值，那么进度条实际上将被更新。
progress.finish()
将进度条的当前值设置为 100%，并使其出现完全填满。
progress.start()
将进度条的当前值设置为 0，使其开始工作。这是默认状态，也是每次页面重新加载时触发的状态。
示例
以下是使用示例：
-- -------------------- ---- -------
------ -------------- ---- ------------------
----- -------- - --- -----------------------------------
--- --------------- - --
--- --------------- - -----
-------- -------------- -
-- -------
----------------
-- --------
--------------- - -------------- -- -
--------------- -- --
------------------------------
-- ---------------- -- ---- -
-------------------------------
------------------
-
-- ----
-
---------------上述代码将创建一个进度条实例并使用 setInterval() 模拟该进度条的增长。当进度条达到 100% 时，我们将清除时间间隔，并调用 progress.finish() 来使进度条完全填充。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca8fb5cbfe1ea0612449