在前端开发中，loading spinner 动画是经常会用到的，它可以让用户在页面加载内容时更好地感知到时间流逝。虽然现在前端框架中已经内置了很多 loading spinner 动画组件，但是本文介绍的 ngx-loading-spinner npm 包也是一款十分实用的 loading spinner 动画组件。
ngx-loading-spinner 简介
ngx-loading-spinner 是一个基于 Angular 的 loading spinner 动画组件，易于在项目中集成使用，提供了多种 loading spinner 样式供用户选择。使用 ngx-loading-spinner，开发者可以很方便地在页面中加入 loading spinner 动画操作。
安装 ngx-loading-spinner
安装前提
在使用 ngx-loading-spinner 之前，需要先在项目中安装 @angular/core 和 @angular/common 两个依赖包。如果已经安装过这两个依赖包，则可以直接从 npm 安装 ngx-loading-spinner。
安装命令
执行以下命令进行安装：
--- ------- ------------------- ------
使用 ngx-loading-spinner
引入 ngx-loading-spinner
在 app.module.ts 等需要使用到轮播组件的模块中引入 ngx-loading-spinner，示例如下：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -加入 ngx-loading-spinner 到某个组件
在组件模板中加入 ngx-loading-spinner 并定义相应的属性值，示例如下：
-------------------- --------------------- --------------------- ---------------- ------------------- ------------------------------------------
isLoading
isLoading 表示是否显示 loading spinner，其属性值为 boolean 类型。在组件中定义一个布尔变量，控制 isLoading 的值即可。
type
type 表示 loading spinner 的类型，组件中提供了多种类型可供选择，如：line-scale、line-spin-fade-loader、pacman、square-spin 等。具体见官网示例 ngx-loading-spinner。
size
size 表示 loading spinner 的大小，组件中提供了两种大小可供选择，分别为 small 和 large。
fullScreen
fullScreen 表示是否全屏显示 loading spinner，其属性值为 boolean 类型。
color
color 表示 loading spinner 的颜色，必须为十六进制格式的字符串。例如：'#cc00cc'。
示例代码
-- - -------- --- ------------------- -- -------------------- --------------------- --------------------- ---------------- ------------------- ------------------------------------------
-- - ---------- --- --------- ----
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - ---------
------- - -----
----------- ---- -
------------- -- -
------------ - ------
-- ------
-
-总结
本文介绍了 ngx-loading-spinner 的安装与使用方法，并提供了相应的示例代码。通过本文的学习，开发者可以更好地掌握 ngx-loading-spinner 的使用方法，从而提高前端开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005686881e8991b448e4689