Ionic - Javascript Loading

Ionic loading will disable any interaction with users when showed and enable it again when it is needed.

Using Loading

we need to inject $ionicLoading in our controller as dependency. we need to call the $ionicLoading.show() method and loading will appear. For disabling it, there is a $ionicLoading.hide() method.


.controller('myCtrl', function($scope, $ionicLoading) {
   $scope.showLoading = function() {
         template: 'Loading...'

   $scope.hideLoading = function(){


<button class = "button button-block" ng-click = "showLoading()"></button>

When a user taps the button, the loading will appear. You will usually want to hide the loading after some time consuming functionalities are finished.

Ionic Loading Show

Loading option parameters

Options Type Details
templateUrl string Used to load HTML template as loading indicator.
scope object Used to pass custom scope to loading. Default is the $rootScope.
noBackdrop Boolean Used to hide the backdrop.
hideOnStateChange Boolean Used to hide the loading when state is changed.
delay number Used to delay showing the indicator in milliseconds.
duration number Used to hide the indicator after some time in milliseconds. Can be used instead of hide() method.

Loading Config

Ionic config is used to configure options you want to be used in all of the $ionicLoading services throughout the app.

This can be done by using $ionicLoadingConfig. Since constants should be added to the main app module, open your app.js file and add your constant after module declaration.

.constant('$ionicLoadingConfig', {
   template: 'Default Loading Template...'

The above code will produce the following screen −

Welookups is optimized for learning.© 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.