Ionic Js十九:加载动画
2024-10-15 12:51:19
ion-spinner
ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时,你就可以呈现给用户相应的加载图标。
该图标采用的是SVG。

实例
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) { });

最新文章
- python之网络编程
- jquery-easyui 树的使用笔记
- dbm速算
- 【Bootstrap基础学习】04 Bootstrap的HTML和CSS编码规范
- Android之POST方法的使用
- 一个项目中哪些文件是要上传到 git上的,哪些是不必要的
- 黄聪:MySql Host is blocked because of many connection errors; unblock with &#39;mysqladmin flush-hosts&#39; 解决方法(转)
- Ural 1099 Work Scheduling
- SKPhysicsJointPin类
- 用浅/深拷贝、和HTML5方法解决js对象的引用的问题
- git 本地给远程仓库创建分支 三步法
- USB_ModeSwitch for Android 7
- 微信小程序解密得到unoinid和手机号 (开放数据的校验和解密 获取手机号)
- vue-地址插件 v-region
- 微信小程序——部署云函数【三】
- Ajax jsonp 跨域请求实例
- HBase最佳实践(好文推荐)
- windows10 vs2015编译 带nginx-rtmp-module 模块的32位nginx
- [LeetCode 题解]: Generate Parentheses
- BZOJ 2535:NOI 2010 航空管制
热门文章
- codevs 1080 线段树练习 CDQ分治
- Seven Techniques for Data Dimensionality Reduction
- 全解析jQuery插件开发!很好很强大!
- LintCode 204: Singleton
- 【CodeForces】961 G. Partitions 斯特林数
- pentaho bi server 配置MySQL数据库
- 写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议
- mogodb的安装与配置
- javaScript书写规范
- Multiple HTTPS Bindings IIS 7 Using appcmd