ionic 加载动作 $ionicLoading

$ionicLoading 是 ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改。

用法

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

.controller('LoadingCtrl', function($scope, $ionicLoading) {

  $scope.show = function() {

    $ionicLoading.show({

      template: 'Loading...'

    });

  };

  $scope.hide = function(){

    $ionicLoading.hide();

  };

});

方法

显示一个加载效果。

show(opts)
参数 类型 详情
opts object

loading指示器的选项。可用属性：

  • {string=} template 指示器的html内容。
  • {string=} templateUrl 一个加载html模板的url作为指示器的内容。
  • {boolean=} noBackdrop 是否隐藏背景。默认情况下它会显示。
  • {number=} delay 指示器延迟多少毫秒显示。默认为不延迟。
  • {number=} duration 等待多少毫秒后自动隐藏指示器。默认情况下，指示器会一直显示，直到触发.hide()。

隐藏一个加载效果。

hide()

API

属性 类型 详情
delegate-handle

(可选)
 字符串

该句柄定义带有$ionicListDelegate的列表。
show-delete

(可选)
 布尔值

列表项的删除按钮当前是显示还是隐藏。
show-reorder

(可选)
 布尔值

列表项的排序按钮当前是显示还是隐藏。
can-swipe

(可选)
 布尔值

列表项是否被允许滑动显示选项按钮。默认：true。

实例

HTML 代码：

<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>Ionic Modal</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>

  </head>
<body ng-controller="AppCtrl">

      <ion-view title="Home">

        <ion-header-bar>

          <h1 class="title">The Stooges</h1>

        </ion-header-bar>

        <ion-content has-header="true">

          <ion-list>

            <ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item>

          </ion-list>

        </ion-content>

      </ion-view>

  </body>

</html>

JavaScript 代码

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

.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {

  // Setup the loader

  $ionicLoading.show({

    content: 'Loading',

    animation: 'fade-in',

    showBackdrop: true,

    maxWidth: 200,

    showDelay: 0

  });

  // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.

  $timeout(function () {

    $ionicLoading.hide();

    $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];

  }, 2000);

});

$ionicLoadingConfig

设置加载的默认选项:

用法:

var app = angular.module('myApp', ['ionic'])

app.constant('$ionicLoadingConfig', {

  template: '默认加载模板……'

});

app.controller('AppCtrl', function($scope, $ionicLoading) {

  $scope.showLoading = function() {

    $ionicLoading.show(); //配置选项在 $ionicLoadingConfig 设置

  };

});

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】---$ionicLoading ion-spinner SVG旋转加载的动画图标的更多相关文章

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

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

  2. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  3. [Swift通天遁地]一、超级工具-(11)使用EZLoadingActivity制作Loading加载等待动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  4. 页面预加载loading动画，再载入内容

    默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...

  5. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  6. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  7. Android 自定义View修炼-自定义加载进度动画XCLoadingImageView

    一.概述 本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. ...

  8. CSharpGL(50)使用Assimp加载骨骼动画

    CSharpGL(50)使用Assimp加载骨骼动画 在(http://ogldev.atspace.co.uk/www/tutorial38/tutorial38.html)介绍了C++用Asism ...

  9. Android酷炫加载进度动画

    概述 本自定义动画进度酷炫View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进 ...

随机推荐

  1. JS中setTimeout()的用法详解

    1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTi ...

  2. SQL 分组后拼接字符串

    with t as( select 'Charles' parent, 'William' child union select 'Charles', 'Harry' union select 'An ...

  3. cin、cout、cerr、clog------c++ Primer Plus

    cin对象与标准输入流相对应. cout对象与标准输出流相对应. cerr对象与标准错误流相对应,常用于程序错误信息,不缓冲,直接被发送给屏幕. clog对象也对应标准错误流(这点儿和cerr是一样的 ...

  4. Ajax上传文件注意事项

    如图: 因为传进来的参数被预先处理了,所以才出现了illegal invocation报错,只要将processData的值改为false就能解决这个小问题: 因为JQ自动的帮我们设置了请求头,但是a ...

  5. vuejs项目性能优化总结

    在使用elementUI构建公司管理系统时,发现首屏加载时间长,加载的网络资源比较多,对系统的体验性会差一点,而且用webpack打包的vuejs的vendor包会比较大.所以通过搜集网上所有对于vu ...

  6. 再谈hive-1.0.0与hive-1.2.1到JDBC编程忽略细节问题

    不多说,直接上干货,这个问题一直迷惑已久,今天得到亲身醒悟. 所以,建议hadoop-2.6.0.tar.gz的用户与hive-1.0.0搭配使用.当然,也可以去用高版本去覆盖它. log4j:WAR ...

  7. Exadata扩展

    所谓Exadata扩展,也即向现有的Exadata环境中增加新的数据库服务器或存储服务器. 扩展原则 可以依循以下规则扩展Exadata: (1).可以将Exadata从某种固定配置扩展到另一种固定配 ...

  8. 谷歌通过ajax获取本地JSON文件，为什么会显示跨域？转载的

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 谷 ...

  9. postgresql 如何设置主键自增

    法一: CREATE TABLE customers ( customerid SERIAL primary key , companyname character varying, contactn ...

  10. C语言的存储类别和动态内存分配

    存储类别分三大类: 静态存储类别 自动存储类别 动态分配内存 变量.对象--->内存管理 内存考虑效率(时间更短.空间更小) 作用域 链接.---->空间 存储器   ----->时 ...