简介
ember-spin-spinner 是一个为 Ember.js 应用程序提供 UI 加载指示器的 npm 包。使用这个包可以简单地将加载指示器添加到应用程序中，以便在加载数据时提供更好的用户体验。
安装
要使用 ember-spin-spinner，首先需要在您的 Ember.js 应用程序中安装它。使用 npm 可以简单地安装：
npm install ember-spin-spinner --save
这将安装 ember-spin-spinner 并将其添加到您的项目中的 package.json 文件中。
使用
ember-spin-spinner 为您提供了一个组件，用于将加载指示器添加到您的 UI 中。您可以简单地使用以下代码将其添加到您的应用程序中：
{{spin-spinner}}这将在页面中添加一个默认的加载指示器。如果您希望更改其样式或配置，则可以传递选项参数来自定义自己的加载指示器。例如：
{{spin-spinner theme='bounce' size='60' color='#ff0000'}}这将创建一个红色的、大小为 60 的“反弹”主题加载指示器。
配置选项
如果您希望更改您的加载指示器的样式或行为，您可以传递以下选项参数：
theme：指定加载指示器的样式主题。可选值包括 "bounce"（反弹），"rotate"（旋转），"bar"（进度条）和 "wave"（波形）。默认为 "rotate"。size：指定加载指示器的大小。默认为 40。color：指定加载指示器的颜色。默认为 "#555"。speed：指定加载指示器旋转或者反弹的速度（以毫秒为单位）。默认为 1000。lines：指定加载指示器的数量。该选项仅适用于 "bar" 和 "wave" 主题。默认为 12。trail：指定加载指示器的轨迹长度。该选项仅适用于 "bounce" 主题。默认为 60。shadow：指定加载指示器的阴影设置（true 或 false）。该选项仅适用于 "bounce"，"rotate" 和 "wave" 主题。默认为 true。
示例代码
以下是一个基本的 Ember.js 应用程序中使用 ember-spin-spinner 加载指示器的示例代码：
-- -------------------- ---- -------
-- ------------------------
------ ----- ---- --------
------ ------- -------------------------
---------- ------
-------- -
---------- ---------- -
--- ---- - -----
--------------------- ------
--------------
---- ---------------------------------------------
------- -----
-------------------------- -
--------------------- -------
-- ------ -------- ----
-- --------------- -
-------------------
---
-
-
---<!-- app/templates/index.hbs -->
{{spin-spinner isVisible=isLoading}}
<button {{action 'fetchData'}}>Fetch Data</button>当用户单击“Fetch Data”按钮时，Ember.js 控制器会调用 fetchData 方法来加载数据。在 fetchData 方法中，我们用 isLoading 属性来跟踪页面的加载状态，并将其传递给 spin-spinner 组件的 isVisible 属性。这将根据 isLoading 属性的值来显示或隐藏加载指示器。
总结
通过使用 ember-spin-spinner，我们可以简单地将加载指示器添加到我们的 Ember.js 应用程序中。该包提供了许多配置选项，以便创建适合您的应用程序的自定义加载指示器。让我们使用这个 npm 包来提高我们的应用程序的用户体验！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e15a563576b7b1ec9f5