Customize $ionicLoading?

ionic-v1
1

Hello,

I’m trying to customize $ionicLoading with stuff like an offset for the title bar and a background image. I’m also trying to totally hide the DOM behind the indicator until images in the DOM are fully loaded.

Right now I’m extending the loading-backdrop class, but that seems inelegant. Is there a better way to customize the loading indicator?

2

As best I know, there is no interface for the $ionicLoading service for you to modify it. So, CSS is the only way.

3

So, I’ve actually found a fairly decent way to customize the loader, although I’ve had to navigate around some of the default CSS in order to keep the loading bar responsive for a few screen sizes.

In terms of customizing the background (along with a header) I’m overriding the loading-backdrop class. The important part here is setting the width and margin-left as percentage sizes, which keeps the loading box looking normal across a few screen sizes.

.loading-backdrop{
    margin-top: 44px; /*loading should stay under the header*/
    background-color: rgb(237, 240, 241);
}

Then, to style some of the actual loading content, I customize the .loading class:

.loading{
    background-color: inherit;
    width: 75% !important;
    margin-left: -37.5% !important;
    border-width: 2px !important;
    border-color: black !important;
    border-style: solid !important;
}

Finally, then there’s inserting HTML into the .loading content, which I did in the $ionicLoading.show() method, as such:

$scope.loadingIndicator = $ionicLoading.show({
                content: "<div class='loading-text'>" + 
                "<div class='row'> " +
                "<div class='col col-33 loading-thumb-container'>" + 
                "<img class='rec-loading-thumb' src='" + $scope.thumbs.small + "' />" +  
                "</div> <div class='col col-66'>" +
                "<h4 class='black-text'>" + $scope.name + "</h4>" +
                "</div> </div>" +
                "</div>",
                animation: 'fade-in',
                showBackdrop: false,
                maxWidth: 200,
                showDelay: 500
            });

The weird part here is that although the $ionicLoading service calls $compile on content, I need to insert some of the view information manually. For now I’m using this workaround, although I think it would be cool if $ionicLoading could load a template, rather than having me write a bunch of HTML in my controller.

Anyway, thanks for the help, and I hope info about this workaround helps others.

4

Loading from a template is a good idea. Care to open a feature request issue on GitHub?

5

Done!