Title: ionic Loading Action | Tutorial\n\n$ionicLoading is a default loading interaction effect in Ionic. The content inside can also be modified within a template.\n\n### Usage\n\nangular.module('LoadingApp', ['ionic']).controller('LoadingCtrl', function($scope, $ionicLoading) { $scope.show = function() { $ionicLoading.show({ template: 'Loading...' }); }; $scope.hide = function(){ $ionicLoading.hide(); };});\n### Methods\n\nDisplays a loading effect.\n\nshow(opts)\n| Parameter | Type | Details |\n| --- | --- | --- |\n| opts | `object` | Options for the loading indicator. Available properties: * `{string=}``template` HTML content for the indicator. * `{string=}``templateUrl` URL of an HTML template to load as the indicator's content. * `{boolean=}``noBackdrop` Whether to hide the backdrop. By default, it will be shown. * `{number=}``delay` How many milliseconds to delay showing the indicator. Defaults to no delay. * `{number=}``duration` How many milliseconds to wait before automatically hiding the indicator. By default, the indicator will remain visible until `.hide()` is triggered. |\n\nHides a loading effect.\n\nhide()\n### API\n\n| Property | Type | Details |\n| --- | --- | --- |\n| delegate-handle _(Optional)_ | `String` | Defines the list associated with `$ionicListDelegate`. |\n| show-delete _(Optional)_ | `Boolean` | Whether the delete button for list items is currently shown or hidden. |\n| show-reorder _(Optional)_ | `Boolean` | Whether the reorder button for list items is currently shown or hidden. |\n| can-swipe _(Optional)_ | `Boolean` | Whether list items are allowed to swipe to reveal option buttons. Default: true. |\n\n* * *\n\n## Example\n\n### HTML Code:\n\n

The Stooges

{{stooge.name}} \n### JavaScript Code\n\nangular.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); });\n\n* * *\n\n## $ionicLoadingConfig\n\nSets default options for the loading indicator:\n\n### Usage:\n\nvar 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 are $ionicLoadingConfig Set };});