Custom $ionicLoading template issue

ionic-v1
1

Hello,

Ionic provides own Loading template (full screen) and I want to create custom one based on $ionicLoading.

So I thought to create my own directive that will take $ionicLoading as template. But found that it will be difficult to maintain.

Regards to DOCs:

{string=} template The html content of the indicator.

So I created some method:

$ionicLoading.show({
            template: '<div>'+
'<div class="backdrop visible backdrop-loading active wm-proper-times" 
     style="height: 260px;   margin-top: 245px; left: 8;"></div>'+
'<div class="loading visible active" style="margin-left: -53px; margin-top: 76px;background-color: rgba(240, 50, 50, 0.7);"><span>Custom Loading...</span></div>'+
'</div>',
            noBackdrop: true
        });

But I got following result:

As you can see even if I added my custom loading, I still get square on top without text.
How can get rid of this empty square?.

Here is DEMO: http://codepen.io/anon/pen/FhCak

Thanks,

1 Like
2

I don’t think it’s a bug, but rather the way you’re setting thing things up.

When you call the loader, it will create the markup that you included in your template, so what you were doing was along the lines of a loader inside a loader…woah

So if you wanted to custom the loader, you would just write some css for those divs. The template/templateUrl is more for customizing the content, not the actual loader.

See codepen below.

1 Like
3

Thank you very much. Great work!

4

As a side note, I suggest to add to document templateUrl support.

5

Ideally, IMO, I would have all components (action sheet, popups, loading, etc.) be set up similar to modals. Point to a template html file, have a div with a class of popup, action-sheet, loading, and then throw your content in there.

6

Hi mhartingon,

How can we use loading.html in a normal application with many templates file in it. Because when I posted loading.html file in my template folder , the application was giving file not found error. So where should we keep loading,html file ?

Regards

Vaibhav

7

Hmm is the path relative to the index.html?

I tried a template for my loader and it worked fine for me.

8

Sorry for hijacking this thread, but is there a way to set ionicLoading template globally rather than for each instance?

9

you could create a service or directive

10

How can i make the bottom message i.e “Custom Loading” as dynamic one ?..Is it possible to change the texts ?

11

Can’t we change the color of spinner inside $ionicLoading?