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...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});

Methods

show(opts)

Shows a loading indicator. If the indicator is already shown, it will set the options given and keep the indicator shown. Note: While this function still returns an $ionicLoading instance for backwards compatiblity, its use has been deprecated.

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.

hide()

Hides the loading indicator, if shown.