介绍
Spinner-ng 是一个基于 AngularJS 的旋转图标组件，可以使用简单的 HTML 标记来快速创建一个漂亮的旋转图标。它包含了多个预定义的动画效果，并且还支持用户自定义动画。Spinner-ng 还提供了多种图标尺寸和颜色可供选择。
安装
你可以使用 npm 命令来安装 spinner-ng 包：
npm install spinner-ng
使用
要使用 spinner-ng，你需要将它添加到你的项目依赖中：
angular.module('myApp', ['spinner-ng']);接下来，你可以在 HTML 页面中添加 spinner-ng 组件，并设置它的属性来控制外观和行为：
<spinner-ng size="2x" type="spin"></spinner-ng>
在这个例子中，我们创建了一个大小为 2 倍（即大号）的旋转图标，使用了“spin”类型的动画。你可以使用不同的属性值来创建不同的旋转图标，例如：
<spinner-ng size="3x" type="chasing-dots" color="red"></spinner-ng>
这将创建一个更大的红色的“chasing dots”类型图标。
属性
以下是 spinner-ng 支持的属性列表：
type：设置动画的类型。可选值有：spin、chasing-dots、double-bounce、cube-grid、bouncing-dots、folding-cube、rotating-plane、pulse。size：设置图标的大小。可选值有：1x、2x、3x、4x、5x。color：设置图标的颜色。可接受任何有效的 CSS 颜色值。speed：设置动画的速度。可选值有：slow、normal、fast。message：设置图标下方的文本信息。delay：设置延迟显示的时间，单位毫秒。
自定义动画
如果 spinner-ng 自带的动画效果无法满足你的需求，你可以使用自定义动画来创建自己的旋转图标。要创建自定义动画，你需要在你的项目中添加一个新的 AngularJS 指令，并在该指令中添加自定义 CSS 样式。
以下是一个自定义动画的例子：
-- -------------------- ---- -------
-------------------------------------------------- -------- -- -
------ -
--------- -----
-------- -----
--------- ----- ------------------------
----- -------- ------- -------- ------ -
--- ------- - --- ---------
------ -------
------ ---
------- --
------ --
------- ---
-------- --
------- --
---------- --
------ --
------ ---
------- ------
-------- ------
---------- ----------
------- ----
---- ------
----- ------
------ ---
--------------------
-
--
---在这个例子中，我们创建了一个名为“customSpinner”的新指令，使用了一个叫做“Spinner”的 JavaScript 库来创建自定义的旋转图标。在指令的 link 函数中，我们创建了一个新的 Spinner 实例，并将其附加到 element[0] 上，从而将自定义旋转图标呈现给用户。
要使用这个自定义的旋转图标，你只需要在 HTML 页面中添加下面的代码：
<custom-spinner></custom-spinner>
就像这样，你就可以轻松地创建自己的旋转图标了！
总结
Spinner-ng 是一个功能强大的旋转图标组件，可以让你快速创建漂亮的旋转图标，而无需繁琐的 CSS 代码。它支持多种动画效果、尺寸和颜色，还可以轻松地自定义动画。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709c8ccae46eb111efa9