在创建一个前端项目时，往往需要向用户展示某些加载过程，以便让用户了解当前页面的状态并提高用户体验。为了解决这个问题，我们可以使用一个名叫 @cime/ngx-slim-loading-bar 的npm包。
什么是@cime/ngx-slim-loading-bar
@cime/ngx-slim-loading-bar 是一个基于 Angular 的轻量级加载进度条。它可以帮助你在你的应用程序中添加优雅的加载进度条。它旨在简单易用，同时可以进行细微的自定义。
安装和使用
安装 @cime/ngx-slim-loading-bar 很简单，你只需要运行以下命令：
npm install @cime/ngx-slim-loading-bar --save
安装成功后，在你的主模块中添加以下代码，即可引入该组件：
-- -------------------- ---- -------
-- -------------
------ - ----------------------- - ---- -----------------------------
-----------
-------- -
-- --- ----- -------
----------------------------------
--
-- --- ----- ----
--
------ ----- --------- -
-现在你可以在你的模块中使用该组件。例如，你可以在某个组件的构造函数中注入SlimLoadingBarService来添加页面的进度条：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- -----------------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------------------- ---------------------- ---------------------- -
-----------------------------------
-
-它将自动实例化并启动进度条。
深入了解@cime/ngx-slim-loading-bar
@cime/ngx-slim-loading-bar 提供了一些很好的特性和属性，以帮助你自定义进度条。
状态属性
- progress：表示进度条当前的变化量，范围为0~1之间，可以手动调整。
方法
- start()：启动进度条；
- stop()：停止进度条；
- reset()：重置状态（将进度条设置为初始状态，并删除所有状态标记）；
- complete()：完成进度条，使进度条显示为100%，并停止进度条；
- set progress(n: number)：手动设置进度条进度。
自定义
@cime/ngx-slim-loading-bar 允许你轻松自定义颜色，进度条高度以及进度条速度。
- 在
NgxSlimLoadingBarModule的forRoot()函数中，可以使用config对象来设置进度条的高度、颜色等属性。
NgxSlimLoadingBarModule.forRoot({
color: '#8228e5',
height: '5px',
delay: 100
})- 你可以使用 CSS 自定义进度条外观。
ngx-slim-loading-bar {
background-color: #8228e5;
height: 5px;
}示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- -----------------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------------------- ---------------------- ---------------------- -
-----------------------------------
------------- -- -
--------------------------------------
-- ------
-
-在这个例子中，我们创建了一个简单的组件，并在构造函数中注入了 SlimLoadingBarService。在构造函数中，启动进度条并在2秒后停止它。
结论
使用 @cime/ngx-slim-loading-bar，我们可以很容易地向我们的应用程序中添加漂亮的进度条，让我们的用户更好地了解应用程序的当前状态，提高用户体验。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668efd9381d61a3540d0d