在前端开发中，我们经常需要为我们的应用程序添加进度条，以展示用户在何种程度上已经完成了某些操作。为了让这一过程更加方便，npm 包 @icircle/ngprogress 可以帮助我们快速实现进度条，本文将详细介绍其使用方法。
安装
使用 npm 命令进行安装：
npm i @icircle/ngprogress
引入
在你的模块中引入 NgProgressModule 模块：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------------- - ---- ---------------------- ----------- -------- --------------- ------------------ ------------- --- ---------- --- -- ------ ----- --------- --
使用
在你的组件中，引入 NgProgress：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ----------------------
------------
--------- -----------
--------- -
------- ------------------------------- -----------------
------- ----------------------------- -----------------
--
--
------ ----- ------------ -
------------------ --------- ----------- --
--------------- -
----------------------
-
-------------- -
---------------------
-
-当你点击 "Start Progress" 按钮时，进度条会自动开始，直到你点击 "Stop Progress" 按钮，进度条才会停止。
自定义样式
你可以在组件的 style.scss 文件中定义自己的样式来调整进度条的外观：
-- -------------------- ---- -------
------- ----------------------------------------
-------- -
------- ----
----------------- -----
-
------------ -
---------------- -
----------------- --------
-
-在上面的例子中，我们将进度条的高度缩小为 4px 并将其背景颜色改为了灰色，将进度条的进度条颜色改为 #0275d8。
进度条的高级用法
修改进度值
有时候，你需要修改进度条的值。可以使用 set() 方法：
this.progress.set(0.5);
这将把进度条的值设置为 50%。
监控进度条的进度
NgProgress 还支持 observable，你可以监听进度条的进度以执行不同的操作。以下是一个简单的例子：
this.progress
.observe()
.subscribe((value) => {
console.log(value);
});此方法会使进度条以 200ms 的间隔发出当前值，它返回一个 Observable<number>，它会在进度条的值发生变化时发出一个新的值。
结论
现在你已经学会了如何使用 @icircle/ngprogress，使用它可以更轻松地为你的应用程序添加进度条，从而改善用户体验。当然，你可以从 GitHub 仓库 中获取更多信息！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cb781e8991b448e6236