Ionic CSS Components
- Ionic - Padding
- Ionic - Icons
- Ionic - Grid
- Ionic - Tabs
- Ionic - Select
- Ionic - Range
- Ionic - Radio Button
- Ionic - Checkbox
- Ionic - Toggle
- Ionic - Forms
- Ionic - Cards
- Ionic - Lists
- Ionic - Buttons
- Ionic - Footer
- Ionic - Header
- Ionic - Content
- Ionic - Colors
Ionic Javascript Components
- Ionic - JS Tabs
- Ionic - JS Slide Box
- Ionic - JS Side Menu
- Ionic - JS Scroll
- Ionic - JS Popup
- Ionic - JS Popover
- Ionic - JS Navigation
- Ionic - JS Modal
- Ionic - JS Loading
- Ionic - JS List
- Ionic - JS Keyboard
- Ionic - JS Footer
- Ionic - JS Header
- Ionic - JS Events
- Ionic - JS Forms
- Ionic - JS Content
- Ionic - JS Backdrop
- Ionic - JS Action Sheet
Ionic Advanced Concepts
- Ionic - Splash Screen
- Ionic - Media
- Ionic - Geolocation
- Ionic - Native Audio
- Ionic - In App Browser
- Ionic - Facebook
- Ionic - Camera
- Ionic - AdMob
- Ionic - Cordova Integration
Ionic Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Ionic - Javascript Loading
Ionic loading will disable any interaction with users when showed and enable it again when it is needed.
Using Loading
Loading is triggered inside the controller. First, we need to inject $ionicLoading in our controller as dependency. After that, we need to call the $ionicLoading.show() method and loading will appear. For disabpng it, there is a $ionicLoading.hide() method.
Controller
.controller( myCtrl , function($scope, $ionicLoading) { $scope.showLoading = function() { $ionicLoading.show({ template: Loading... }); }; $scope.hideLoading = function(){ $ionicLoading.hide(); }; });
HTML Code
<button class = "button button-block" ng-cpck = "showLoading()"></button>
When a user taps the button, the loading will appear. You will usually want to hide the loading after some time consuming functionapties are finished.

Some other option parameters can be used when working with loading. The explanation is shown in the table below.
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 milpseconds. |
duration | number | Used to hide the indicator after some time in milpseconds. 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 −
