How can I show loading on the InAppBrowser

<img id="loading" name="loading" src="img/loading.GIF" style="position: absolute;top: 50%;left: 50%;margin-left:-32px;margin-top:-32px;">
    	document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() 
    		 ref ='', '_self', 'location=no,zoom=no,hardwareback=yes,hidden=yes');
    		ref.addEventListener('loadstart', function(event) { $('#loading').show(); });
    		ref.addEventListener('loadstop', function(event) { $('#loading').hide();; });
    		ref.addEventListener('loaderror', function(event) { ref.close(); alert("Connection Error!"); ionic.Platform.exitApp();});
    		ref.addEventListener('exit', function(event) {ionic.Platform.exitApp();});

In here I want to show loading.gif on the screen when inappbrowser load any page. But after first load, it doesn’t work anymore. Because loading.gif stays back of inappbrowser. How can I show this gif on the screen with every page load?

i have also the same issue have you solve it

If you are using ngcordova then you should review this plugin provided by ngcordova.

It is quite good and provides good options for loading indicators.

Show and hide are the simple events for displaying loading. So you do not need to write custom css and also do not need to use gif image for loading as well.

i m not looking for plugin i m looking for code which helps me to use loader in event url change event .


you can use pace.js
here is a link

When I try _self, a black screen is appearing for 3 to 4 seconds prior loading the external url and is creating a very bad user experience. Did any of you guys face the same issue ?

1 Like

Do you have a solution for ionic 3 ? :grimacing:

if you need to show animated image when navigate throught pages in inappbrowser you can use my modified library that suppports it: