转载

ionic 加载动画

ion-spinner

ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。

该图标采用的是SVG。

用法

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

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

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

实例

HTML 代码

 <ion-content scroll="false" class="has-header">   <p>     <ion-spinner icon="android"></ion-spinner>     <ion-spinner icon="ios"></ion-spinner>     <ion-spinner icon="ios-small"></ion-spinner>     <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>     <ion-spinner icon="circles" class="spinner-energized"></ion-spinner>   </p>    <p>     <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>      <ion-spinner icon="dots" class="spinner-dark"></ion-spinner>     <ion-spinner icon="lines" class="spinner-calm"></ion-spinner>     <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>     <ion-spinner icon="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; } .spinner svg {   width: 19% !important;   height: 85px !important; }

JavaScript 代码

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

效果如下所示：

正文到此结束

所属分类： ionic 教程

本文标签： 实例 Android HTML App JavaScript 代码 IOS CSS http ip src java
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

ionic 加载动画

ionic 加载动画

ion-spinner

用法

实例

HTML 代码

CSS 代码

JavaScript 代码

热门推荐

相关文章

ionic 教程

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流