as3 urlloader php交互 jsion,【Ionic】---$ionicLoading ion-spinner SVG旋转加载的动画图标

ionic 加载动做 $ionicLoading

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

用法

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

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

$scope.show= function() {

$ionicLoading.show({

template:'Loading...'});

};

$scope.hide= function(){

$ionicLoading.hide();

};

});

方法

显示一个加载效果。css

show(opts)

参数

类型

详情

opts

object

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

{string=} template 指示器的html内容。

{string=} templateUrl 一个加载html模板的url做为指示器的内容。

{boolean=} noBackdrop 是否隐藏背景。默认状况下它会显示。

{number=} delay 指示器延迟多少毫秒显示。默认为不延迟。

{number=} duration 等待多少毫秒后自动隐藏指示器。默认状况下，指示器会一直显示，直到触发.hide()。

隐藏一个加载效果。android

hide()

API

属性

类型

详情

delegate-handle

(可选)

字符串

该句柄定义带有$ionicListDelegate的列表。ios

show-delete

(可选)

布尔值

列表项的删除按钮当前是显示仍是隐藏。app

show-reorder

(可选)

布尔值

列表项的排序按钮当前是显示仍是隐藏。ionic

can-swipe

(可选)

布尔值

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

实例

HTML 代码：

Ionic Modal

The Stooges

{{stooge.name}}

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

设置加载的默认选项:svg

用法:

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。

用法

//默认用法

像大部分其余的ionic组件同样，spinner也可使用ionic的标准颜色命名规则，就像下面这样：

实例

HTML 代码

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

});