前言
在 Web 开发过程中，进度条是一个很常见的需求，比如在加载页面的时候需要一个进度条来显示当前页面加载的进度。@ngx-kit/ui-loading-bar 就是一个用于显示进度条的 npm 包。
安装
使用 npm 进行安装：
npm install @ngx-kit/ui-loading-bar --save
使用
- 导入 LoadingBarService
import { LoadingBarService } from '@ngx-kit/ui-loading-bar';- 注入 LoadingBarService
constructor(private loadingBarService: LoadingBarService) {}- 使用 LoadingBarService
在需要显示进度条的地方调用 this.loadingBarService.start()，在加载完成后调用 this.loadingBarService.stop()。
this.loadingBarService.start(); // 加载完成后 this.loadingBarService.stop();
- 设置进度条颜色
使用 LoadingBarService.color 属性可以设置进度条颜色。
this.loadingBarService.color = 'red';
完整示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- --------------------------
------------
--------- -----------
--------- -
------- ----------------------------
--
--
------ ----- ------------ -
------------------- ------------------ ------------------ --
------ -
---------------------------- - ------
-------------------------------
-- ------
------------- -- -
------------------------------
-- ------
-
-总结
@ngx-kit/ui-loading-bar 是一个方便使用的进度条工具，可以帮助我们轻松地实现进度条的显示效果。在使用时，我们只需要导入、注入 LoadingBarService，然后在需要显示进度条的地方调用 start 方法，在加载完成后调用 stop 方法即可。此外，我们还可以设置进度条的颜色来满足不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c21