介绍
Angular-Spinner 是一个基于 SVG 的加载动画库，它提供了各种不同风格的动画，可以方便地集成到 Angular 应用中。在本文中，我们将详细介绍如何安装和使用 Angular-Spinner。
安装
要使用 Angular-Spinner，需要先安装 npm 包。可以通过以下命令来安装：
npm install angular-spinner --save
使用
引入模块
在 AppModule 中引入 SpinnerModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------
--
---------- --------------
--
------ ----- --------- - -在组件中使用
在需要显示 Spinner 动画的组件中，添加以下代码：
<ngx-spinner></ngx-spinner>
然后在组件的 TS 文件中，导入 NgxSpinnerService 服务，并在构造函数中注入：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------------- - ---- -------------- ------------ --------- ----------- --------- ----------------------------- -- ------ ----- ------------ - ------------------- -------- ------------------ -- -
NgxSpinnerService 中提供了几个方法，可以控制 Spinner 的显示和隐藏。
显示 Spinner
this.spinner.show();
隐藏 Spinner
this.spinner.hide();
自定义选项
Angular-Spinner 提供了一些选项，可以自定义 Spinner 的样式、大小和颜色等。以下是一些常用的选项：
spinner
指定 Spinner 的类型，包括以下几种：
line-scale: 线条缩放动画。ball-spin: 旋转球体动画。pacman: 吃豆人动画。cube-grid: 立方体网格动画。chasing-dots: 追逐点动画。
例如下面这个示例使用 ball-spin 类型的动画：
<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-spin"></ngx-spinner>
bdColor
指示 Spinner 的背景颜色，默认为白色。可以使用任何 CSS 颜色值，例如 #000 或 rgba(255, 255, 255, 0.8)。
size
指示 Spinner 大小的字符串，可以是 small、medium 或 large，也可以是任何数字，例如 30（表示 30px）。
color
指示 Spinner 前景色的字符串，可以是任何 CSS 颜色值，例如 #000 或 rgba(255, 255, 255, 0.8)。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- --------------
------------
--------- -----------
--------- ------------- ---------------------------- ------------- ------------ --------------------------------
--
------ ----- ------------ -
------------------- -------- ------------------ --
---------- -
--------------------
------------- -- -
--------------------
-- ------
-
-在上述代码中，我们使用了 ball-spin 类型的动画，并设置了背景颜色、大小和前景色。在组件初始化时，我们调用了 show() 方法显示 Spinner，然后在 3 秒钟后调用了 hide() 方法隐藏它。
总结
Angular-Spinner 是一个非常实用的加载动画库，可以为 Angular 应用增加一些酷炫的效果。在本文中，我们介绍了如何安装和使用 Angular-Spinner，并
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35887