---

Ionic 是一种基于 AngularJS 的移动应用框架。它提供了丰富的开发工具和组件，以便快速、高效地构建出美观、可靠、快速的移动应用程序。其中，在Ionic中，加载动作是一种用于展示应用程序正在进行处理的轻量级又美观的特效。在本文中，我们将详细解释如何使用Ionic以及如何使用Ionic加载动作。

使用Ionic加载动作的步骤如下：

第1步：引入Ionic

如要使用Ionic，您需要在HTML文件头部引入Ionic库文件。

<link href="https://cdn.bootcdn.net/ajax/libs/ionic/2.0.0-beta.1/css/ionic.css" rel="stylesheet">

然后在脚本文件头部引入Ionic框架的js文件。

<script src="https://cdn.bootcdn.net/ajax/libs/ionic/2.0.0-beta.1/js/ionic.bundle.js"></script>

第2步：添加HTML代码

下一步是添加HTML代码。

<div class="loading">
  <ion-spinner></ion-spinner>
</div>

在代码中，我们使用了ion-spinner标签，用于在页面中展示一个加载动作。您可以根据需要对其进行自定义并调整其属性。

第3步：应用CSS样式

接下来，需要为加载动画添加CSS样式。有多种可用的加载动画，您可以在Ionic文档中找到这些样式。在此处，我们使用了"loading"样式。

.loading {
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
}

.loading .spinner {
  display: inline-block;
  height: 40px;
  margin: 0 auto;
  width: 40px;
}

在此示例中，我们设置了加载动作的位置、样式等属性，以便其在页面中居中展示。您可以根据需要对其进行自定义。

第4步：添加JavaScript功能

您可以通过AngularJS使用Ionic加载动作的JavaScript功能

$scope.showloading = function() {
  $ionicLoading.show({
    template: '正在加载...',
  });
};

$scope.hideloading = function(){
  $ionicLoading.hide();
};

在代码中，我们使用了$scope.showloading和$scope.hideloading 方法来触发和隐藏加载动作。

结语

在Ionic中，展示一个有效的加载动作是使您的应用程序看起来更专业的一种方法。而且，Ionic库中提供了一种标准方式来添加这些加载动作。通过简单几行代码就可以轻松地添加一个美观的加载动画。