显示和隐藏加载动画
1. 创建新的移动设备项目。
2. 在 2D 工作区上，将“表格布局”小组件拖放到工作区。
3. 单击“项目”窗格中的 row-1。
4. 在“详细信息”窗格中，单击两次“网格操作”下面的“添加列”。
5. 将以下小组件拖放到网格布局列中：
|
列
|
小组件
|
属性
|
|---|---|---|
|
1
|
按钮
|
在“文本”字段中输入 Start。
|
|
2
|
按钮
|
在“文本”字段中输入 Cancel。
|
|
3
|
进度环
|
取消选中“可见”复选框
|
 |
在本教程中，我们使用了即用型样式对按钮设置颜色。有关详细信息，请参阅主题。
|
6. 接着，创建一个新应用程序参数以绑定“进度环”小组件上的属性。在“数据”窗格中，单击“应用程序参数”旁边的绿色“+”图标。
7. 在“添加应用程序参数”窗口的“名称”字段中输入 spinnerVisible，然后单击“添加”。
8. 接着，将 spinnerVisible 应用程序参数与该进度环绑定，方法如下：将 spinnerVisible 旁边的绑定图标 
拖放到“项目”窗格中的 spinner-1 上。
拖放到“项目”窗格中的 spinner-1 上。
选择“选择绑定目标”窗口中的“可见”。
9. 单击“项目”窗格中的 Home.js。在 JavaScript 编辑器中输入以下内容：
$scope.hideSpinner = function() {
$scope.app.params.spinnerVisible = false;
};
$scope.start = function() {
$scope.app.params.spinnerVisible = true;
$scope.timeoutPromise = $timeout($scope.hideSpinner, 3000);
};
$scope.cancel = function() {
$timeout.cancel($scope.timeoutPromise);
};
10. 单击“项目”窗格中的“主页”返回工作区。
11. 选择“开始”按钮查看其属性。
12. 在“详细信息”窗格中，单击“单击”事件旁边的 JS 图标，然后在“表达式”框中输入以下内容：start();
单击该按钮时，将执行 start JavaScript 函数。
13. 选择“取消”按钮查看其属性。
14. 在“详细信息”窗格中，单击“单击”事件旁边的 JS 图标，然后在“表达式”框中输入以下内容：cancel();
单击该按钮时，将执行 cancel JavaScript 函数。
15. 单击“预览”。您现在单击“开始”按钮即可调用进度环。
