简介
ngx-rim-loader-bar 是一个 Angular 的 Material 风格加载条组件，它允许开发者在应用的任何地方加入一个顶部加载条，让用户在页面加载的过程中能够看到进度。
该组件非常适用于大型应用，当应用有大量异步请求、图片等资源需要加载时，能够让用户明显感觉到加载的进度，提高了用户体验。
安装
npm install ngx-rim-loader-bar --save
用法
在
app.module.ts中导入NgxRimLoaderBarModule模块-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - --------------------- - ---- --------------------- ------ - ------------ - ---- ------------------ ----------- ------------- - ------------ -- -------- - -------------- --------------------- -- -- --------------------- -- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -在任何需要使用加载条的组件中，引入
NgxRimLoaderBarService并在需要显示加载条时调用start()方法，在加载完成后调用complete()方法。import { Component } from '@angular/core'; import { NgxRimLoaderBarService } from 'ngx-rim-loader-bar';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'my-app';
-- -------------------- ---- -------
------------------- ------- ----------------------- --
---------- -
-------------------- -- -----
----------------------- -- -
----------------------- -- -----
---
-
------- ----- ----------- ------------ -
-- ------------ -------- -----------------
----- --- --------------- -- ------------------- -------
-}
-- -------------------- ---- ------- -- --- - ------------------------ -- --------- -------------------------- -- ------------ ----------------------- - -------------------------- - --------- ------ -------- --------- -------- - --------- ----- ------------- - ----------------- --------- ------------ - --------- ------ -------- -------- --------- -- -- ---- ------- ---- ------------------ --- -----------------------------------------
-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------ - ---------------------- - ---- ---------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - ---------
------------------- ------- ----------------------- --
---------- -
--------------------
----------------------- -- -
-----------------------
---
-
------- ----- ----------- ------------ -
----- --- --------------- -- ------------------- -------
-
-总结
ngx-rim-loader-bar 组件不仅提供了一个优雅实用的加载条，同时也启示我们如何从用户体验出发，尽可能地让用户在前端应用的加载过程中获得反馈和支持。它让我们设计和实现交互更加舒适和美好，提高了应用的质量和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e2fb81d47349e53e0f