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的更多相关文章

  1. Ionic Js十九：加载动画

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

  2. Ionic Js十：加载动作

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

  3. Ionic Js十二：导航ion-nav-view

     ion-nav-view 当用户在你的app中浏览时,ionic能够检测到浏览历史.通过检测浏览历史,实现向左或向右滑动时可以正确转换视图. 采用AngularUI路由器模块等应用程序接口可以分为 ...

  4. 服务器启动时Webapp的web.xml中配置的加载顺序

    一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...

  5. 服务器启动时Webapp的web.xml中配置的加载顺序(转载）

    一 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Ser ...

  6. ionic js ion-tabs选项卡栏操作

    ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航 ...

  7. .NET提供了三种后台输出js的方式：

    .NET提供了三种后台输出js的方式: 首先创建 js文件testjs.js {    Page.ClientScript.RegisterClientScriptInclude("keys ...

  8. Ionic Js十六：滚动条

    ion-scroll ion-scroll 用于创建一个可滚动的容器. <ion-scroll [delegate-handle=""] [direction="& ...

  9. android加载大量图片内存溢出的三种方法

    android加载大量图片内存溢出的三种解决办法 方法一:  在从网络或本地加载图片的时候,只加载缩略图. /** * 按照路径加载图片 * @param path 图片资源的存放路径 * @para ...

随机推荐

  1. 洛谷 P4196 [CQOI2006]凸多边形 (半平面交)

    题目链接:P4196 [CQOI2006]凸多边形 题意 给定 \(n\) 个凸多边形,求它们相交的面积. 思路 半平面交 半平面交的模板题. 代码 #include <bits/stdc++. ...

  2. 『Golang』—— 标准库之 time

    ... package main import ( "fmt" "time" ) func main() { time.AfterFunc(time.Milli ...

  3. 将本地已有的一个项目上传到新建的git仓库的方法

    将本地已有的一个非git项目上传到新建的git仓库的方法一共有两种. 一. 克隆+拷贝 第一种方法比较简单,直接用把远程仓库拉到本地,然后再把自己本地的项目拷贝到仓库中去.然后push到远程仓库上去即 ...

  4. 【Linux】- 守护进程的启动方法

    转自:Linux 守护进程的启动方法 Linux中"守护进程"(daemon)就是一直在后台运行的进程(daemon). 本文介绍如何将一个 Web 应用,启动为守护进程. 一.问 ...

  5. python不同包之间调用时提示文件模块不存在的问题

    python对于跨包调用函数时,经常会提示模块不存在的问题,主要是python程序执行时,搜索路径导致的,python程序执行的路径依次是: (1)程序根目录(2)环境变量(3)标准库目标(D:\Py ...

  6. 笔记36 Spring Web Flow——配置

    Spring Web Flow是一个Web框架,它适用于元素按规定流程运行的程序.Spring Web Flow是Spring MVC的扩展,它支持开发基于流程的应用程 序.它将流程的定义与实现流程行 ...

  7. Spring框架4大原则和主要功能

    Spring框架4大原则: 使用POJO进行轻量级和最小侵入式开发 POJO(Plain Ordinary Java Object)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJ ...

  8. Tools: java安装指南

    参考: https://www.cnblogs.com/smyhvae/p/3788534.htmljava安装 (1)新建->变量名"JAVA_HOME",变量值" ...

  9. Linux下安装SkyWalking 6.1版本 以及.NETCore项目集成

    SkyWalking和APM介绍 今天给大家给大家介绍一下SkyWalking,那什么是SkyWalking Skywalking 是 Apache 基金会下面的一个开源 APM 项目 ,那什么又是A ...

  10. Maven将本地项目打包后引入本地另一个项目

    进入需要打包的文件夹,执行:mvn clean install -X 生成JAR包 打完JAR包后,将maven依赖安装 执行命令: install:install-file -Dfile=E:\co ...