随着 Web 应用的复杂度不断提高，前端页面上的交互效果也越来越多样化。其中，进度条是非常常见的一种交互效果。如果从头自己开发一个进度条可能会比较麻烦，而 npm 包 jwe-progress （实际上是 wrapper-progress）就提供了一个简单易用的解决方案。
什么是 jwe-progress？
jwe-progress 是一个基于 CSS3 和原生 JS 实现的进度条包装器，可以通过简单的 API 调用实现自定义样式和交互。
如何使用 jwe-progress？
首先，我们要安装该包，使用 npm 命令：
npm install wrapper-progress
安装完成后，在页面中引入该包，例如：
<link rel="stylesheet" href="node_modules/wrapper-progress/dist/jwe-progress.css"> <script src="node_modules/wrapper-progress/dist/jwe-progress.js"></script>
或者，如果您使用了 webpack 等模块化的工具，可以直接通过 import 导入：
import jweProgress from 'wrapper-progress'
引入 jwe-progress 后，我们需要为进度条定义一个容器，比如：
<div id="progress-bar"></div>
之后，我们就可以通过如下代码初始化进度条：
var progressBar = new jweProgress();
progressBar.init('#progress-bar');这里用到了 jweProgress 的两个方法，init(selector) 用于指定进度条的容器选择器，start() 用于触发进度条开始运行。
默认情况下，start() 方法会以 1 秒钟的速度让进度条从 0% 到 100%。如果你希望调整这个速度，可以传递一个时间参数（单位为毫秒），例如：
progressBar.start(5000); // 5 秒钟内完成进度条
同时，我们还可以通过一些可选参数来自定义进度条的样式，例如：
var progressBar = new jweProgress({
strokeWidth: 2, // 进度条的宽度
strokeColor: '#00ff00', // 进度条的颜色
backgroundColor: '#eaeaea', // 进度条的背景颜色
easing: 'swing' // 进度条的运动曲线，详细参考 [jQuery Easing](https://easings.net/)
});jwe-progress 参数详解
初始化参数：
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| strokeWidth | Number | 4 | 进度条的宽度 |
| strokeColor | String | '#4AD9D9' | 进度条颜色 |
| backgroundColor | String | '#EEE' | 进度条背景颜色 |
| easing | String/Function | 'linear' | 进度条运动曲线 |
API：
| 方法名 | 参数 | 描述 |
|---|---|---|
| init | selector(element) | 进度条容器的选择器或 DOM 元素 |
| start | time(ms), callback(function) | 开始进度条，可选的参数为进度条完成时间（毫秒）、完成后的回调函数 |
示例代码
以下是一个简单的示例代码，可以复制到本地文件中运行：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ------------
----- ---------------- -----------------------------------------------------------
-------
------------------- -
------- -----
------ ------
------- -----
-------------- -----
----------- -----
--------- -------
-
--------
-------
------
---- ---------------------------
---- ------------------------
------
------- ------------------------------------------------------------------
--------
--- ----------- - --- -------------
------------ ---
------------ ----------
---------------- ---------
---
----------------------------------
-- - - ----------
----------------------- ---------- -
--------------------- -----------
---
---------
-------
-------结语
通过 npm 包 jwe-progress 的使用教程，我们了解了如何通过原生 JS 创建并自定义一个进度条，为 Web 应用应用提供了更多交互效果。同时，我们也学习到了如何通过 npm 安装和使用第三方包，这在实际开发中非常实用。最后，我希望这个教程对你有所启发，可以更好地掌握前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e40520b171f02e1daf