Loading dialog disappears immediately after opening

I have several views within my app which use $ionicLoading. The first time the loading service is used, the dialog seems to behave properly. That is, it stays open for the correct amount of time while my app is doing its thing in the background.

Later, after transitioning to other views, calls to $ionicLoading.show result in a loading dialog flickering onto the screen briefly and then disappearing after about 1/2 second.

Am I doing something wrong?
Is this expected behavior?


Did a little more research into the problem and I’ve at least narrowed things down a little. The behavior seems correct with regard to ng-animate and classes being added removed as expected.

The animation basically transitions from

<div class="loading-backdrop fade-in ng-animate enabled-add active enabled enabled-add-active">



at which point the loading spinner is hidden. It should be visible at this point since I have not called “hide()” and the ‘active’ class is present.

About 10 seconds later, I call the hide method and the loading dialog becomes visible again for a split second and then quickly disappears.

After the ‘active’ class is removed and the dialog disappears, I can manually read the ‘active’ class and the dialog is visible again.

This is really strange. The exact same set of classes renders the dialog invisible in once case and visible in the other.

Can you post a sample on CodePen.

I’ve modified an old sample here : http://codepen.io/calendee/pen/pLsuD
Using the different views, I have a button to show a loading indicator for each page. All seems to be working fine no matter how many times I load.

Thanks for the reply @Calendee. I’m sure something I’m doing something wrong on my end but I’m just having a really hard time figuring out what it is. There is something fishy going on with the transition that results in the dialog being hidden at the end of the fade-in.

Thanks again for the reply and for taking the time to setup a codepen.

Hi @Calendee ,

I have one issue in loading dialog.I have update in the above codepen editor.The problem is when calling the Showloading function first it is going to alert which i have i added in that function after that the loading dialog is appearing.Is there any possible way to overcome this issue.Please suggest for this issue.

I’m not sure why the alert is there. However, just put the alert in a different timeout or inside the timeout for hiding the loading indicator.

Hi Calendee,
Thanks for replying actually my question is why the alert is calling first then loader is firing.while calling loader is there any async call behaviour is happening.