Programming AngularJS
How to show Loader for $http calls in AngularJs ?

Hello Readers !!  In this post we are going to see how we can add a loader for $http calls in our angular applications. This loader will be shown whenever our angular application will send some call to server. I am assuming that you are aware of basics of AngularJs, if not then please go through the AngularJs official Developer Documentation.

So, lets begin, first of all we will be making simple loader UI with HTML and CSS. So our HTML will look somewhat as shown below.

Here I have used font-awsome’s spinner icon. You can keep same or can build your own loader/spinner, somewhat like this. Now let’s move to CSS part. Our loader should cover whole area of page and should not allow any actions unless all calls to server are finish. All we need to have div which will be having height and width 100% and z-index to be highest than all other elements. Below is exactly what we need

Next thing we will be adjusting our font-awsome’s spinner icon to center of our loader div with the help of following class

top and left values are as per my screen resolution, you can try adjusting them as per yours. Now lets move to angular part, we will be constructing a directive of attribute type with name loader. Following is code for it

Here we have added a watch $http.pendingRequests , which actually return number of calls made by browser which are in pending state. So all we need to do is whenever this number of pending calls are more than 0 then show our loader otherwise hide it. Now if you want to apply this for some specific calls for example, this loader should work only for API calls in my application and my API base is ‘/api’ so you can do it simply by adding this lines to scope.isLoading

Tag

Related Post

Leave a Reply