ionic 加载动画 ― ion-spinner

在做项目的时候需要用到加载的动画，因为用到了ionic这个框架，框架里面的ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。根据自己的项目需求选择一个合适的就可以了，下面是加载动画的部分效果，如图所示：

该图标采用的是SVG。

用法

<ion-spinnericon="spiral"></ion-spinner>//默认用法

像大部分其他的ionic组件一样，spinner也可以使用ionic的标准颜色命名规则，就像下面这样：

<ion-spinnerclass="spinner-energized"></ion-spinner>

HTML 代码

<ion-contentscroll="false"class="has-header">
<p>
<ion-spinnericon="android"></ion-spinner>
<ion-spinnericon="ios"></ion-spinner>
<ion-spinnericon="ios-small"></ion-spinner>
<ion-spinnericon="bubbles"class="spinner-balanced"></ion-spinner>
<ion-spinnericon="circles"class="spinner-energized"></ion-spinner>
</p>

<p>
<ion-spinnericon="crescent"class="spinner-royal"></ion-spinner>

<ion-spinnericon="dots"class="spinner-dark"></ion-spinner>
<ion-spinnericon="lines"class="spinner-calm"></ion-spinner>
<ion-spinnericon="ripple"class="spinner-assertive"></ion-spinner>
<ion-spinnericon="spiral"></ion-spinner>
</p></ion-content>

CSS 代码

body{
cursor:url('http://www.runob.com/try/demo_source/finger.png'),auto;}p{
text-align:center;
margin-bottom:40px!important;}.spinnersvg{
width:19%!important;
height:85px!important;}

JavaScript 代码

angular.module('ionicApp',['ionic']).controller('MyCtrl',function($scope){
});

==================================

小月博客

demo下载地址：http://www.aliyue.net

注： 打开请搜索ionic 找到你要下载的demo

==================================