Ionic Loading Action

From WikiOD

Ionic loading action[edit | edit source]

$ionicLoading is the default loading interaction effect of ionic. The content inside can also be modified in the template.

Usage[edit | edit source]
 angular.module('LoadingApp', ['ionic'])
 .controller('LoadingCtrl', function($scope, $ionicLoading) {
   $ = function() {
       template: 'Loading...'
   $scope.hide = function(){
Method[edit | edit source]

Show a loading effect.

Parameter Type Details
opts object Options for the loading indicator. Available attributes:
  • {string=} template The html content of the indicator.
  • {string=} templateUrl A url to load the html template as the content of the indicator.
  • {boolean=} noBackdropWhether to hide the background. It will be displayed by default.
  • {number=} delayHow many milliseconds delay the indicator is displayed. The default is no delay.
  • {number=} durationHow many milliseconds to wait before automatically hiding the indicator. By default, the indicator will remain displayed until triggered .hide().

Hide a loading effect.

API[edit | edit source]
Attributes Type Details


String The handle definition comes with $ionicListDelegatethe list.


Boolean value Whether the delete button of the list item is currently displayed or hidden.


Boolean value Whether the sort button of the list item is currently displayed or hidden.


Boolean value Whether the list item is allowed to slide to display the option buttons. Default: true.

Instance[edit | edit source]

HTML code:[edit | edit source]
 <code><html ng-app="ionicApp">
     <meta charset="utf-8"></code>
 <code> </code>   <code><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></code> 
 <code> </code>   
 <code> </code>   <code><title>Ionic Modal</title></code>
 <code> </code>    <code><link href="" rel="stylesheet"></code>
 <code> </code>   <code><script src=""></script></code>
 <code> </code> <code></head></code>
 <code> </code> <code><body ng-controller="AppCtrl">
       <ion-view title="Home">
           <h1 class="title">The Stooges</h1></code>
 <code> </code>       </ion-header-bar>
 <code> </code>       <ion-content has-header="true">
 <code> </code>         <ion-list>
 <code> </code>           <ion-item ng-repeat="stooge in stooges" href="#"><code>{{}}</code></ion-item>
 <code> </code>         </ion-list>
 <code> </code>       </ion-content>
 <code> </code>     </ion-view>
 <code> </code>   
 <code> </code> <code></body></code>
Java Script code[edit | edit source]
 angular.module('ionicApp', ['ionic'])
 .controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
   // Setup the loader
     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 () {
     $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
   }, 2000);

$ Ionic Loading Config[edit | edit source]

Set the default options for loading:

Usage:[edit | edit source]
 var app = angular.module ('myApp', ['ionic'])
 app.constant('$ionicLoadingConfig', {
   template:'Default loading template...'
 app.controller('AppCtrl', function($scope, $ionicLoading) {
   $scope.showLoading = function() {
     $; //Configuration options are set in $ionicLoadingConfig