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. c# sql省市联动

    C# sql省市联动 USE [Book] GO ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ); ...

  2. GoogLeNet InceptionV2/V3/V4

    仅用作自己学习 这篇文章中我们会详细讲到Inception V2/V3/V4的发展历程以及它们的网络结构和亮点. GoogLeNet Inception V2        GoogLeNet Inc ...

  3. vncviewer 命令行使用

    一.命令行输入密码登录 /usr/bin/vncviewer 192.168.210.80:3此时弹出输入密码框,输入密码即可登录 二.命令行免输入密码登录 (a) /usr/bin/vncviewe ...

  4. 屏幕字段不允许直接输入，只能通过SearchHelp(F4)

    ---恢复内容开始--- REPORT  z_barry_test NO STANDARD PAGE HEADING . PARAMETERS: p_date TYPE sy-datum ,      ...

  5. kuangbin专题七 POJ3264 Balanced Lineup （线段树最大最小）

    For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always line up in the same order. One d ...

  6. IDEA中jsp页面写out.println会报错？

    解决办法: (1)在WEB-INF目录下新建一个lib目录,并把Tomcat安装目录下的如下两个jar包复制过来. (2)选择jsp-api.jar,右键,Add as Library. (3)在Fi ...

  7. logrotate工具日志切割

    /var/log/zabbix/zabbix_server.log { daily ##每天转储 rotate ##保留60个备份 olddir /usr/local/src ##保存日志的位置 co ...

  8. php小试牛刀

    [构造函数] function __construct() [析构函数] 当某个对象的所有引用被删除,或者对象被显式的销毁时会执行析构函数 function __destruct() [静态方法] p ...

  9. fsockopen函数被禁用的解决方法

    判断fsockopen 是否可用:function_exists('fsockopen');如果没有开启 一.开启fsockopen函数 修改php.ini,将 disable_functions = ...

  10. [ZJOI2018]历史（LCT）

    这篇还发了洛谷题解 [Luogu4338] [BZOJ5212] 题解 题意 给出一棵树,给定每一个点的 \(access\) 次数,计算轻重链切换次数的最大值,带修改. 先考虑不带修改怎么做 假设 ...