How to show loader (loading spinner image) in angular js ?

[Ankush Joshi]

Hello , 

How to show loader (loading spinner image) in angular js ?

I have solution for above question, but i didnt think that its efficient one.. i want to show loader while redirecting pages as well as while loading table data/ other content etc. 

Currently, I am showing and hiding div from controllers .. it works but want more efficient without replicating same code again and again .. like by creating service or any thing !! 

Thanks 

[Luís Loureiro]

Hi Ankush!

You can try to set a CSS class (use ng-class) that is only visible when something happens, for the redirect pages you can try to configure a listener for the $stateRouteChangedEvent (or something similar).

That class can be applied to any container element, e.g. body.
Set this styling:

.loading:before
{

1. content: "";
2.     position: absolute;
3.     top: 0;
4.     left: 0;
5.     right: 0;
6.     bottom: 0;
7.     background-color: black;
8.     z-index: 2;

}

I don't have sufficient time to provide you a more useful example but I hope that this helps you.

Regards,
Luís Loureiro

[Ankush Joshi]

Thanks.... 

Its fine...