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. BIO与NIO的方式实现文件拷贝

    面试题 - 编程实现文件拷贝.(这个题目在笔试的时候经常出现,下面的代码给出了两种实现方案) import java.io.FileInputStream; import java.io.FileOu ...

  2. UIStepper更加详细的图文理解

    前言 UIStepper是一个微调器,该控件的外观和UISwitch相似,但该控件上包含了+,-两个按钮,共同用于控制某个值的增.减. 它继承了UIControl基类,默认属于活动控件,它可以与用户交 ...

  3. Canvas 与 Image 相互转换

    转换 Image为 Canvas 要把图片转换为Canvas(画板,画布),可以使用canvas元素 context 的drawImage方法: 代码如下: // 把image 转换为 canvas对 ...

  4. docker的常用操作

    查看所有的镜像: docker images 查看所有的容器: docker ps -a 查看正在运行的容器: docker ps 移除容器: docker rm -f 容器id 移除镜像: dock ...

  5. Exadata扩展

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

  6. IE下 checkbox、radio等标签的label中的img点击无效（点击不能选中）问题解决

    类似以下代码,点击图片不能选中checkbox <input id="dw_1" name="shape[]" value="Round&quo ...

  7. 【笔记】如何在for语句中迭代多个可迭代对象

    并行=>使用内置函数zip,它能将多个可迭代对象合并,每次迭代返回一个元组. for i,j,k in zip(a,b,c): TODO 穿行=>使用标准库中的itertools.chai ...

  8. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_发布者策略控制

    在 读经典——<CLR via C#>(Jeffrey Richter著) 笔记_高级管理控制(配置)中,是由程序集的发布者将程序集的一个新版本发送给管理员,后者安装程序集,并手动编辑应用 ...

  9. 74th LeetCode Weekly Contest Preimage Size of Factorial Zeroes Function

    Let f(x) be the number of zeroes at the end of x!. (Recall that x! = 1 * 2 * 3 * ... * x, and by con ...

  10. vue.js学习笔记(二)——vue-router详解

    vue-router详解 原文链接:www.jianshu.com 一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用<a></a> ...