View Source   Improve this doc

$ionicLoading

An overlay that can be used to indicate activity while blocking user interaction.

Usage

angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...',
      duration: 3000
    }).then(function(){
       console.log("The loading indicator is now displayed");
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide().then(function(){
       console.log("The loading indicator is now hidden");
    });
  };
});

Methods

show(opts)

Shows a loading indicator. If the indicator is already shown, it will set the options given and keep the indicator shown.

Param Type Details
opts object

The options for the loading indicator. Available properties:

  • {string=} template The html content of the indicator.
  • {string=} templateUrl The url of an html template to load as the content of the indicator.
  • {object=} scope The scope to be a child of. Default: creates a child of $rootScope.
  • {boolean=} noBackdrop Whether to hide the backdrop. By default it will be shown.
  • {boolean=} hideOnStateChange Whether to hide the loading spinner when navigating to a new state. Default false.
  • {number=} delay How many milliseconds to delay showing the indicator. By default there is no delay.
  • {number=} duration How many milliseconds to wait until automatically hiding the indicator. By default, the indicator will be shown until .hide() is called.
  • Returns: promise A promise which is resolved when the loading indicator is presented.

hide()

Hides the loading indicator, if shown.

  • Returns: promise A promise which is resolved when the loading indicator is hidden.