在加載前端的數據的時候，很多時候不能用進度條來衡量不定數據量。此時加載動畫就有用武之地了。可以在數據請求時顯示加載動畫，等動畫加載完成再隱藏加載動畫，讓前端更具交互友好性。
網上百度了很多關於這方面的資料，但是好多感覺都很繁瑣，本着偷懶的心態，在html5應用開發框架ionic中找到了該加載動畫的庫
和其他開發庫類似，首先需要加載該庫的js 和 css，然後在html中直接使用即可。接下來關於使用和在使用過程中遇到的問題做下記錄。
ionic簡單介紹
ionic是一個輕量的手機UI庫，具有速度快，界面現代化、美觀等特點。是一個強大的 HTML5 應用程序開發框架(HTML5 Hybrid Mobile App Framework )。
- ionic 基於Angular語法，簡單易學。
- ionic 是一個輕量級框架。
- ionic 完美的融合下一代移動框架，支持 Angularjs 的特性， MVC ，代碼易維護。
- ionic 提供了漂亮的設計，通過 SASS 構建應用程序，它提供了很多 UI 組件來幫助開發者開發強大的應用。
- ionic 專注原生，讓你看不出混合應用和原生的區別
- ionic 提供了強大的命令行工具。
- ionic 性能優越，運行速度快
更多介紹：
> http://www.runoob.com/ionic/ionic-tutorial.html
加載動畫在前端的使用
- 首先需要加載ionic的js和css，這步可以使用國內bootcdn服務：
http://www.bootcdn.cn/ionic/
<link href="//cdn.bootcss.com/ionic/1.3.2/css/ionic.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
- 創建ionic應用並初始化App
1. 初始化app：angular.module('todo', ['ionic'])
2. 在加載動畫模塊添加ng-app="ionicApp"
- 遇到的問題
1. 已經在前端使用了bootstrap框架的樣式了，新添加ionic樣式導致界面出現問題；
2. 加載動畫未能居中顯示
- 解決問題
1. 刪除ionic樣式的引用，只使用js文件
2. 單獨設置加載動畫的樣式
- 完成後的代碼
<div class="row" ng-app="ionicApp" id="spinnerDiv">
<div class="col-lg-6 col-lg-offset-3">
<p style="width:15%; margin: auto ;padding-top:10px"><!--居中顯示-->
<ion-spinner icon="bubbles" style="width:10%;stroke:#33cd5f;fill:#33cd5f;"></ion-spinner><!--bubbles加載動畫的樣式-->
</p>
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<script src="//cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<script>
angular.module('ionicApp', ['ionic'])
</script>- 效果
擴展
其他加載動畫樣式
首先：在ionic的ionic.mini.css中找到class的樣式設置；
然後：將樣式使用style進行設置即可；
例子：
<html ng-app="ionicApp">
<div class="row" ng-app="ionicApp" id="spinnerDiv">
<div class="col-lg-6 col-lg-offset-3">
<p style="width:15%; margin: auto ;padding-top:10px"><!--居中顯示-->
<ion-spinner icon="lines" style="stroke:#11c1f3;fill:#11c1f3"></ion-spinner><!--bubbles加載動畫的樣式-->
</p>
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<script src="//cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<script>
angular.module('ionicApp', ['ionic'])
</script>
</html>
小結
到此就是加載動畫在前端的使用，其他的樣式可以參照”擴展”進行設置。
ionic Spinner: http://www.runoob.com/ionic/ionic-ion-spinner.html