$ionicLoadingConfig -> changing the defaults

I really like the concept of the $ionicLoadingContent as documented. I want to be able to customize the $ionicLoading, but generalize it for all loading screens to keep it DRY. One thing I have noticed is that the docs are pretty minimal in this area. I was considering sending a PR to at least list the other options, besides template. I’m not sure how stable those options are, however.

My question: is anyone changing the defaults effectively? I tried chaining the constant described in the docs to my module and updating options like showBackdrop: false. In my controller in question, I have added $ionicLoading as a parameter to the function and I am calling bare $ionicLoading.show();. I do not see any change locally.

Any suggestions?

See the doc for the object that you want customize in this case http://ionicframework.com/docs/api/service/$ionicLoading/ and then use ionicLoading and test, i don’t test but this can work.

Or use html tags example

content: '<i class="icon ion-loading-c"></i>',

You can always customize with css.

@Norwill Thanks for your reply. I think you are misunderstanding my question: I am asking about the $ionicLoadingConfig docs here. I understand that one can edit $ionicLoading. What the docs intimate is that you can “Set the default options to be passed to the $ionicLoading service.”

This would leave me to believe that I could set the options in one place in a constant and not have to redefine the options everywhere I want to use the loader – I want to keep it D.R.Y.

I am asking if this is the case and if anyone has had any success setting the options on this service.

Was a misunderstanding, i dont use $ionicLoadingConfig, for keep it D.R.Y i create a service when define the setting to $ionicLoading and call from anywhere on my app.

I hope this will be useful.


@Norwill interesting! Would you mind posting a sample of what overriding the$ionicLoading looks like either here or in a codepen? That way anyone else who finds this thread (and I) can learn from what you’re doing.


I’m still curious if anyone has essentially done the same thing but with $ionicLoadingConfig

I take from here

This is mi code

.factory('LoaderService', function($rootScope, $ionicLoading) {
    return {
        show : function() {

            $rootScope.loading = $ionicLoading.show({
                content: '<i class="icon ion-loading-c"></i>',
                animation: 'fade-in',
                showBackdrop: true,
                minWidth: 200,
                showDelay: 10

        hide : function(){

.controller('MyCtrl', function($scope, $timeout, $rootScope, LoaderService, OtherService) {
	OtherService.getData(function(dataResponse) {
        $scope.data = dataResponse;

I use LoaderService in all controllers

Another approach can be see here:



@Norwill great. thanks for sharing!

You can change css. To change background color and textcolor:

.loading-container .loading {
    background-color: white;
    color: black;

    width: 50% !important;
    border-width: 2px !important;
    border-color: black !important;
    border-style: solid !important;



@Norwill, This worked partily for me, the content was not changable.
What i did was , in the service, i replaced

content: '<i class="icon ion-loading-c"></i>'


template: '<i class="icon ion-loading-c"></i>'

then it worked, hope this will help some one.


1 Like

You can add your custom css classes to the template. I’ve put also a spinning image in some of my loading containers.

I am curious if anyone has actually had a custom controller like a cancel button that would cancel a promise.

Is this possible with ionic loader? I am trying to grasp the logic around this of passing the promise to it.

I am new to angular.

Any thoughts anyone?

Hello @mbeizer,

You can define a angular.constant inside your app.js file, where you would put your $rootScope. Like so:

    angular.constant('$ionicLoadingConfig', {
        template: '<ion-spinner icon="android"></ion-spinner>'

Then, whenever you call $ionicLoading.show(), it will have the configurations you set there :slight_smile:


Hello @brunodb3,

Is it possible to add a default class to $ionicLoading?

I have try this, but not working.

angular.constant('$ionicLoadingConfig', {
template: 'some text'
,cssClass: 'blackcolor'

I refer to this documentation but unable to make the dark color default backdrop disappear. My purpose is that the dark background change to same color with background or no color.

$ionicLoading.show({noBackdrop: true, duration: 1800,
  template: '<ion-spinner icon="lines" class="spinner-energized"></ion-spinner> <br/> My Label'