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

});

尝试一下 »

效果如下所示：

完整源码：

<html ng-app="ionicApp">

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<title></title>

<link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">

<script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>

<script type="text/javascript">

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {

});

</script>

<style type="text/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;

}

</style>

</head>

<body ng-controller="MyCtrl">

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

</body>

</html>

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

Ionic Js十九：加载动画
ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG. 实例 HTML 代码 <ion-c ...
Ionic Js十：加载动作
$ionicLoading 是 ionic 默认的一个加载交互效果.里面的内容也是可以在模板里面修改. 用法 angular.module('LoadingApp', ['ionic']) .cont ...
Ionic Js十二：导航ion-nav-view
ion-nav-view 当用户在你的app中浏览时,ionic能够检测到浏览历史.通过检测浏览历史,实现向左或向右滑动时可以正确转换视图. 采用AngularUI路由器模块等应用程序接口可以分为 ...
服务器启动时Webapp的web.xml中配置的加载顺序
一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...
服务器启动时Webapp的web.xml中配置的加载顺序(转载）
一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...
ionic js ion-tabs选项卡栏操作
ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航 ...
.NET提供了三种后台输出js的方式：
.NET提供了三种后台输出js的方式: 首先创建 js文件testjs.js { Page.ClientScript.RegisterClientScriptInclude("keys ...
Ionic Js十六：滚动条
ion-scroll ion-scroll 用于创建一个可滚动的容器. <ion-scroll [delegate-handle=""] [direction="& ...
android加载大量图片内存溢出的三种方法
android加载大量图片内存溢出的三种解决办法方法一: 在从网络或本地加载图片的时候,只加载缩略图. /** * 按照路径加载图片 * @param path 图片资源的存放路径 * @para ...

随机推荐

spring中的web上下文，spring上下文，springmvc上下文区别(超详细)
web上下文(Servlet context),spring上下文(WebApplication Context),springmvc上下文(mlWebApplicationCont)之间区别. 上下 ...
Java8向后兼容
toInstant()方法被添加到可用于将它们转换到新的日期时间的API原始日期和日历对象.使用ofInstant(Insant,ZoneId)方法得到一个LocalDateTime或ZonedDat ...
zabbix4.0自动注册实践
共分为两个步骤: 1.主机zabbix_agent客户端的配置文件 2.主机zabbix_server网页端的自动注册配置 zabbix_agent配置文件 Server=192.168.100.15 ...
Java中在磁盘上复制文件
使用字节流实现 public static void main(String[] args) throws IOException { InputStream in = new FileInputSt ...
etimer
Contiki包含一个时钟模型和5个定时器模型(timer, stimer, ctimer, etimer, and rtimer),先学习etimer吧. etimer是一个结构体,(个人用eve ...
docker Dockerfile学习---构建redis环境
1.创建项目目录并下载包及文件 mkdir centos_redis cd centos_redis wget http://download.redis.io/releases/redis-5.0. ...
Linux/CentOS 7 timezone 修改
1.su - 登录root用户 2.timedatectl set-timezone {timezone} (set后面加想要设置的时区) 举例:timedatectl set-timezone As ...
笔记49 在Spittr应用中整合Hibernate
在前边构建的Spittr应用中整合Hibernate 由于最近所学的hibernate都是使用xml方式进行配置的,所以在与以Java方式配置的Spittr应用结合时就会出现一些小问题,在此进行总结. ...
自然数幂和&伯努利数(Bernoulli)
二项式定理求自然数幂和由二项式定理展开得 \[ (n+1)^{k+1}-n^{k+1}=\binom {k+1}1n^k+\binom {k+1}2n^{k-1}+\cdots+\binom {k+ ...
leetcode-159周赛-5233-规划兼职工作*
方法: class Solution: def jobScheduling(self, startTime: List[int], endTime: List[int], profit: List[i ...

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