Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Implementing Loading Animations in AngularJS and jQuery

DZone's Guide to

Implementing Loading Animations in AngularJS and jQuery

Here is a simple set of steps to set up a basic loading animation with jQuery on a front-end that uses the AngularJS framework. Just the basics to get started.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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. 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's start with the jQuery. I want to show a spinner until I receive a response whenever I post something to the server from the form. 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 an 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 here is 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 the more clear, I have created a sample interceptor demo in a Plunker. You can see it here: http://plnkr.co/edit/hAg1T8sdsLq5c61iW97f?p=preview

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

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
jquery ,ajax ,javascript ,angularjs ,web dev

Published at DZone with permission of Arian Celina, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}