前言
在开发 Web 应用时，我们经常需要在页面上展示 loading 状态，以便提示用户当前数据正在加载中，这一般通过使用 spinner 效果来实现。而 spinner-angular 就是可以使用在 Angular 应用中的一个 npm 包，它提供了几种不同类型的 spinner 效果，并且使用起来非常方便。
在本文中，我们将介绍 spinner-angular 的功能和用法，并且提供一些示例代码帮助您更好地了解如何使用该 npm 包。
简介
spinner-angular 是一个提供多种 spinner 效果的 npm 包。它使用 Angular 组件的形式提供了多种样式的 spinner 效果，例如旋转和交替线条等。这些 spinner 效果可以方便地集成到您的 Angular 应用中，以帮助向用户传递当前状态的信息。
安装
您可以通过以下命令安装 spinner-angular：
npm install spinner-angular --save
使用
在完成安装后，您需要将 SpinnerModule 导入到您的 Angular 应用中以开始使用 spinner-angular。您可以使用以下命令将该模块导入到您的组件中：
import { SpinnerModule } from 'spinner-angular';
@NgModule({
imports: [
SpinnerModule
]
})接下来，您就可以在您的组件中使用 spinner-angular 的 spinner 了。对于不同的 spinner，您需要在 HTML 文件中使用对应的标签来展示它们。例如，使用以下语句展示一个 cat-spinner：
<cat-spinner></cat-spinner>
spinner-angular 提供了许多不同的 spinner，您可以通过在标签中添加不同的类来展示真正需要的 spinner。例如，如果您想要一个 bounce-spinner，您可以使用以下代码：
<bounce-spinner></bounce-spinner>
spinner-angular 还提供了一些全局配置，例如可以设置 spinner 的大小、颜色等等。您可以在应用的根模块中设置这些全局配置，例如：
-- -------------------- ---- -------
------ - -------------- -------------- - ---- ------------------
----- ---------------- ------------- - -
----- ---------
------ ---------
-
-----------
---------- -
- -------- --------------- --------- --------------- -
-
--组件一览
以下是 spinner-angular 提供的一些常用 spinner 组件。您可以在实际开发中根据需要选择并使用它们。
cat-spinner
展示一个可爱的猫咪。
<cat-spinner></cat-spinner>
bounce-spinner
展示一个跳动的小球。
<bounce-spinner></bounce-spinner>
rotate-spinner
展示一个旋转的圆圈。
<rotate-spinner></rotate-spinner>
line-spinner
展示一行交替的线条。
<line-spinner></line-spinner>
circle-spinner
展示一圈固定数量的圆点。
<circle-spinner></circle-spinner>
总结
在本文中，我们介绍了使用 spinner-angular 实现 spinner 效果的方法。我们讲解了如何安装和使用 spinner-angular，以及如何配置和使用多种不同类型的 spinner。希望这篇文章能够对你有所帮助，谢谢阅读！
示例代码
以下是一个简单的 Angular 组件，展示了如何使用 spinner-angular 中的 spinner：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------------
--------- -
---- --------------------
-----------------------------
--------
------
-
--
------ ----- ----------- -
----------- - -----
---------- -
----------------
-
---------- -
-- ---- ----- ---- -------
---------------- - ------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672281e8991b448e3929