在前端开发中，进度条是非常常见的功能，可以用来显示某个任务当前的进度，以及显示页面的加载状态。而现在，有一个非常好用的 npm 包叫做 custom-typescript-progress-bar，可以帮助我们快速构建一个自定义的进度条。
安装
在使用 custom-typescript-progress-bar 之前，需要先安装它，只需要在终端中执行以下命令即可：
npm install custom-typescript-progress-bar --save
使用
下面我将向大家介绍如何使用 custom-typescript-progress-bar，以构建一个简单但具有实用价值的进度条为例。
创建进度条
首先，我们要创建一个进度条，可以使用如下代码：
-- -------------------- ---- ------- ------ ----------------- ---- --------------------------------- ----- ----------- - --- ------------------- ------ ---------- ------- --- ---------- ---------------------------------------- ------------------- ----- --- ---------------------
这段代码创建了一个颜色为橙色，高度为 10 像素的进度条，默认会自动增加进度。它需要被渲染到 id 为 progress-bar 的 div 中。
更新进度条
我们可以使用下面的代码来更新进度条的进度：
progressBar.updateProgress(50);
这段代码将进度条的进度更新为 50%。
暂停/继续增加进度
我们可以使用下面的代码来暂停/继续增加进度：
// 暂停 progressBar.pause(); // 继续 progressBar.resume();
完成进度
我们可以使用下面的代码来完成进度：
progressBar.finish();
这段代码将进度条的进度更新为 100%。
示例代码
最后，附上完整的示例代码：
-- -------------------- ---- -------
------ ----------------- ---- ---------------------------------
----- ----------- - --- -------------------
------ ----------
------- ---
---------- ----------------------------------------
------------------- -----
---
---------------------
-- -----------
--- -------- - --
----- ----- - -------------- -- -
-------- -- ---
-------------------------------------
-- --------- -- ---- -
---------------------
---------------------
-
-- ------以上就是 custom-typescript-progress-bar 的使用教程，希望大家能够在实际项目中应用它，并获得良好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583caa