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