什么是 ngx-fancy-preloader
ngx-fancy-preloader 是一个轻量级的 Angular 加载动画包，它提供了多种炫酷的加载效果，可以让你的网站或应用程序更加生动和吸引人。
ngx-fancy-preloader 基于 Angular 8 调用 RxJS 动画库创建了许多可定制的加载器，并且可以与 Angular 默认的 HTTP 加载器结合使用。同时，它还提供了模块和服务等多种形式的集成，使你可以在应用程序中方便地使用这些加载器。
如何使用 ngx-fancy-preloader
步骤 1： 安装
在使用 ngx-fancy-preloader 之前，你需要先将它安装到你的项目中。
你可以使用 Angular CLI 通过以下命令来安装它：
npm install ngx-fancy-preloader --save
步骤 2： 导入模块
当你完成安装后，你需要在你的应用程序模块中导入 ngx-fancy-preloader 模块：
import { NgxFancyPreloaderModule } from 'ngx-fancy-preloader';
@NgModule({
imports: [
NgxFancyPreloaderModule
]
})
export class AppModule { }步骤 3： 添加加载器
有了 ngx-fancy-preloader 模块之后，你就可以开始添加加载器了。
首先，你需要在你的组件中引入 NgxFancyPreloaderService：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------------ - ---- ----------------------
------------
--------- -------------
--------- -
---- ---------------------
-
--
------ ----- --------------- -
------------------- ---------- ------------------------- - -
-然后，你可以通过调用 preloader 的 startLoading() 方法来展示你的加载器：
ngOnInit() {
this.preloader.startLoading();
// 模拟 HTTP 请求
this.http.get('url').subscribe((response) => {
this.preloader.stopLoading();
});
}现在，当你的组件加载时，加载器将会被展示。
步骤 4： 自定义加载器
如果你需要使用不同的加载器样式，或者需要更多自定义选项，你可以通过创建指定类的加载器来实现。
例如，你可以通过创建类似下面这样的 CSS 文件来定义新的加载器：
-- -------------------- ---- ------- -------------- - -------- ----- --------- ------ ---- -- ----- -- ------ -- ------- -- ----------------- -------- - --------------------- - -------- --- -------- ------ ------- ----- ------ ---- ------- ---- -------------- ---- ------- --- ----- --------- ---- ---- ---- ----------------- -------- ---------- ---- -- -------- ------- -
然后，你可以使用定义的类来创建自定义加载器：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------------ - ---- ----------------------
------------
--------- -------------
--------- -
---- ----------------------------
-
--
------ ----- --------------- -
------------------- ---------- ------------------------- - -
---------- -
--------------------------
---------- ---------------
---
------------------------------
-- -- ---- --
----------------------------------------- -- -
-----------------------------
---
-
-步骤 5： 高级选项
ngx-fancy-preloader 还提供了一些高级选项来满足你更细微的需求。例如，你可以通过在模块中使用 NgxFancyPreloaderConfig 来更改默认选项：
-- -------------------- ---- -------
------ - ------------------------ ----------------------- - ---- ----------------------
----- ---------------- ----------------------- - -
------------ ----------------
-------- ------
----- - -----
------- - ----
--
-----------
-------- -
------------------------------------------------
-
--
------ ----- --------- - -ngx-fancy-preloader 具有众多自定义选项，你可以在官方文档中查看更多内容：ngx-fancy-preloader - GitHub
结论
ngx-fancy-preloader 是一个功能强大的前端加载动画库，它提供了多种加载器样式和自定义选项，可以帮助你创建炫酷的加载效果并为你的网站或应用程序提供更好的用户体验。在实际使用中，通过使用 ngx-fancy-preloader，你可以更加便捷地处理各种异步加载操作，提高应用程序的性能与可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab581e8991b448d84f9