❮ Ionic Ion Nav View Ionic Tutorial ❯

Ionic Loading Action

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

Usage

angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});

Methods

Displays a loading effect.

show(opts)

Parameter	Type	Details
opts	object	Options for the loading indicator. Available properties: {string=} template The HTML content of the indicator. <br>{string=} templateUrl A URL of an HTML template to load as the content of the indicator. <br>{boolean=} noBackdrop Whether to hide the backdrop. By default, it is shown. <br>{number=} delay The number of milliseconds to delay showing the indicator. Defaults to no delay. <br>{number=} duration The number of milliseconds to wait before automatically hiding the indicator. By default, the indicator will stay visible until .hide() is called.

Hides a loading effect.

hide()

API

Property	Type	Details
delegate-handle (optional)	string	The handle that defines the list with $ionicListDelegate.
show-delete (optional)	boolean	Whether the delete button for the list item is currently shown or hidden.
show-reorder (optional)	boolean	Whether the reorder button for the list item is currently shown or hidden.
can-swipe (optional)	boolean	Whether the list item is allowed to slide to reveal option buttons. Default: true.

Example

HTML Code:

<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.tutorialpro.org/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.tutorialpro.org/static/ionic/js/ionic.bundle.min.js"></script>
  </head>
  <body ng-controller="AppCtrl">

      &lt;ion-view title="Home">
        <ion-header-bar>
          <h1 class="title">The Stooges</h1>
        </ion-header-bar>
        &lt;ion-content has-header="true">
          <ion-list>
            &lt;ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item>
          </ion-list>
        </ion-content>
      </ion-view>

  </body>
</html>

JavaScript Code

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

});

Try it »

$ionicLoadingConfig

Set default options for loading:

Usage:

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

❮ Ionic Ion Nav View Ionic Tutorial ❯