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) { 

});

Ionic Js十九:加载动画的更多相关文章

  1. Ionic Js十:加载动作

    $ionicLoading 是 ionic 默认的一个加载交互效果.里面的内容也是可以在模板里面修改. 用法 angular.module('LoadingApp', ['ionic']) .cont ...

  2. ionic js 加载动画 ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时,你就可以呈现给用户相应的加载图标。 该图标采用的是SVG

    ionic 加载动画 ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG. 用法 <ion- ...

  3. 原生JS实战:分享一个首页进度加载动画!

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...

  4. js spin 加载动画(loading)

    js spin 加载动画 最近做页面ajax加载是又用到loading动画,还好有一个spin.js 具体的包大家可以去http://fgnass.github.com/spin.js/下载, 如果想 ...

  5. 加载动画插件spin.js的使用随笔

    背景: 在请求后台的“漫长”等待过程中,为了提升用户体验,需要一个类似  的加载动画效果,让用户明确现在处于请求过程中,而不是机子down掉或者网站死了 静态demo(未与后台交互): HTML代码如 ...

  6. 原生JS+ CSS3创建loading加载动画;

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  7. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  8. 三、js提交请求加载启动动画、请求完成成功回调、注销加载动画

    1.通过Query  post方式进行异步请求方法 jQuery.post(url, [data], [callback], [type]) 参数说明: url:发送请求地址 data:待发送 Key ...

  9. webAPP制作框架Ionic--构建APP侧边栏 底部选项卡 轮播图 加载动画

    超好用的移动框架--Ionic Ionic是一个轻量的手机UI库,具有速度快,界面现代化.美观等特点. 为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版 ...

随机推荐

  1. bzoj千题计划116:bzoj1025: [SCOI2009]游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=1025 题目转化: 将n分为任意段,设每段的长度分别为x1,x2,…… 求lcm(xi)的个数 有一个 ...

  2. 如何创建一个https的站点(超简单) 以及 IIS7.5绑定Https域名

    1.申请免费1年的ssl证书(传送门:https://common-buy.aliyun.com/?spm=5176.2020520163.cas.29.N0xOPM&commodityCod ...

  3. [整理]Node入门 » 一本全面的Node.js教程 - Demo实践所遇到的问题

    花了一个上午看完[转载]Node入门 » 一本全面的Node.js教程 根据里面的Demo自己手动实现过程中还是遇到了些问题,特整理在此. <1>.由于node.msi安装包已经自动添加了 ...

  4. python核心编程笔记——Chapter2

    对于.py文件,任何一个空的式子都不会有什么输出,如下: #!/usr/bin/env python #-*-coding=utf-8-*- #无任何效果,空语句 1 + 2 * 4 对于i++,++ ...

  5. 创建分区swap分区

    1.将文件系统卸载 #umount /sdc5 2.创建swap分区 #mkswap /dev/sdc5 3.激活swap分区 #swapon -a /dev/sdc5 4.查看swap分区情况 #s ...

  6. Chrome截长屏

    本文地址:https://www.cnblogs.com/veinyin/p/9257833.html   Chrome截取长屏一直是一个痛点,之前尝试过第三方截图工具,但是不是收费就是不怎么好用,今 ...

  7. 【Linux 命令】 rsync 目录覆盖软链接,保持软链接不变并同步目录内容

    需求:有两个相同文件名的目录需要使用其中一个目录覆盖另外一个  问题: 被覆盖目录下存在软链接,但在源目录下软链接是一个目录 需要解决的方案: 要求将原目录里和被覆盖目录里冲突的目录文件复制到B的软链 ...

  8. POJ 3468 A Simple Problem with Integers (区间更新+区间查询)

    题目链接 Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operation ...

  9. php array转化为utf-8编码以便于转化为json数据

    php中转化为json时,字符串或数组编码必须为utf-8编码. 在网上找到了一个方法可以比较简单的转化,在此记录: 利用var_export()和eval()方法var_export():输出或返回 ...

  10. 单调栈(G - Sliding Window POJ - 2823 )

    题目链接:https://cn.vjudge.net/contest/276251#problem/G 题目大意:给你n和m,然后问你对于(m,n)这中间的每一个数,(i-m+1,i)这个区间的最小值 ...