Implementing Loading Animation in AngularJS and jQuery

With the advancement of web development technologies, web applications are closing the user experience gap with desktop applications very quickly. It is a very common practice to let the user know when the application is busy with a certain task, and one of the most common ways to do this is by showing a loading indicator or a spinning gif. This will let the user know that the application is working and he or she will not try to refresh or press other buttons until the task is finished.

To implement this, before the task is initiated at server, we must show our spinner or any loading animation we want to show, and then when the task is finished (successfully or unsuccessfully) hide the animation. I will show you how you can do it using jQuery and using AngularJS.

Implementing Loading Animation in jQuery

Let us start with the jQuery. I want to show a spinner whenever I post something to the server from the form, until I receive a response. Let us suppose we have a form like this:

<form id="subscriptionForm">
  <label for="email">Your email</label>
  <input type="email" id="email" name="email" />
</form>

and I have a div with a spinner gif img inside it somewhere in the HTML.

<div id="processing" style="display: none"><img src="spinner.gif" /></div>

At the beginning, I need to make this hidden, so you can put a CSS style.

display:none

or hide it using jquery or whatever way you like most.

There are several forms to determine how to show the spinner and hide it. One way is to bind to subscriptionForm ajaxSend and ajaxComplete events to show and hide the spinner respectively.

$("#subscriptionForm").bind("ajaxSend", function(){	
   $("#processing").show();
}).bind("ajaxComplete", function(){		
   $("#processing").hide();
});

This will make the spinner show when a ajax request starts from that form and disappear when the request completes.

If it is the case that you need to make the spinner show for every ajax request made within the page, then you may need to bind the events to the DOM.

You can also make the spinner show as a modal dialog by applying a style like this and adding class:

ajax-loader

to the spinner img element:

#processing {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
    opacity: .6;
}

.ajax-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;     
}

This will make the spinner show in a modal dialog and prevent the user from initiating any other requests before this one finishes.

Implementing Loading Animation in AngualarJS Apps

The strategy for implementing the loading animation in AngularJS is little different and requires a bit of a setup. To catch the start and end of requests, in AngularJS, we must create http interceptors for request and response. Interceptors will intercept requests before they are handed to the server so we can show our spinner and response before it is handed to the client so we can hide the spinner.

To get the interceptors, we need to register them through an anonymous factory and inside request and response functions, we need to show and hide the div of spinner respectively.

myApp = angular.module('myApp',[]).config(function($httpProvider){
  $httpProvider.interceptors.push(function($q) {
    return {
     'request': function(config) {
         $('#processing').show();
         return config;
      },

      'response': function(response) {
         $('#processing').hide();
         return response;
      }
    };
  });
});

Interceptors are a useful part of AngularJS which can be used to make several kinds of validations before a request is made or after a response is received (authentication validations, etc.), and one of the tasks we can put here is also to show and hide the spinner when a request has started and completed (please be aware that for the simplicity of the code, I have omitted functions which check for errors on requests).

To make the example more clear, I have create a sample interceptor demo in a Plunker, you may see it here.

This was a simple post to show you how is implementing loading animation in AngularJS and jQuery done. Of course, your scenario may have additional or more complex requirements but this should serve as a basis to set it up.

The post Implementing loading animation in AngularJS and jQuery appeared first on arian-celina.com.