ionic 加载动画 ― ion-spinner

前端之家收集整理的这篇文章主要介绍了ionic 加载动画 ― ion-spinner前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

ion

该图标采用的是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


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

猜你在找的Angularjs相关文章