Using a JavaScript Spinner During an Ajax Request

JorgeM 2 1K Views

When users interact with your web page and processes, it is important to provide them with continuous feedback. Without the feedback, a user is left wondering if you page is actually processing work, frozen, or just not working. This is especially true when incorporating Ajax requests that take more than a few seconds for the process to complete successfully.

For this reason, you will find that "spinners" or "progress bars" are used to display what seems to be the browser performing some work in the background. In reality, all that is really happening behind the scenes is that the web page is displaying some type of animation. Once the process is completed, the animation should be hidden on the page.

In many cases, you will find that if you use an animated GIF, the animation can encounter "freezing". There are some options you can implement to try to adress the freezing, but I have been using a better solution for quite some time. Rather than using a image based spinner, I now incorporate a JavaScript based spinner instead. Actaully, what I call a JavaScript spinner is a combination of JavaScript, and CSS leveraging Keyframes. This JavaScript spinner is also very consistent across the most common browsers being used. I've found that it is a "hit or miss" when using an image based spinner.

Fortunately, there is a great project availabe called spin.js which makes it very easy to incorporate this type of spinner in your web pages. You can even customize your spinner (size, color, etc...). Bigtime kudos to Felix Gnass. I have never used an animated GIF again after I started incorporating spin.js into my pages.

The code snippet provided here is a simple example of how to use a spinner during an Ajax request, but the example is not complete. The jQuery Ajax method used is just a sample. You will have to modify it for your needs. However, I have developed a working example on JSFiddle.net so you can see a demo. The JSFiddle simulates an Ajax Request with a 3 second delay.

If you visit the spin.js site, you will find all of the files/links that you need to use in your project. If you are going to use the jQuery version, you need the following three files for your project. If you do not plan on using the jQuery plugin, all you need is the spin.min.js JavaScript file.

-jQuery library
-spin.min.js JavaScript file (minimized)
-jquery.spin.js jQuery plugin

In this example, we are applying this to an Ajax Request. However, you will find that you can incorporate this for links, and other elements that you use to interact with your users.

The process is the same regardless of the element used.

-Click something
-Show the spinner
-On success, hide the spinner

Enjoy!

spin.png 10.32 KB
DaveAmour commented: Looks good +5
cereal commented: nice! +13 
<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
  <style>
  #spinBox {
    z-index:999;
    opacity:0.8;
    display:none;
    border-radius:0.25em;
    width:5em;
    height:5em;
    margin: -2.5em 0 0 -2.5em;
    background-color:#f0f3f6;
    border:1px solid #cdcdcd;
    position:fixed;
    top:50%;
    left:50%
  }
 </style>
  <script src="/js/jquery.min.js"></script>
  <script src="/js/spin.min.js"></script>
  <script src="/js/jquery.spin.js"></script>
</head>
<body>

  <div id="spinBox"></div>
  <button id="btnGetAjax">Get Data (Ajax)</button>
  <div id="result"></div>

  <script>
  $('#btnGetAjax').click(function(){
    $('#result').html("Loading in 3 seconds...");
    $('#spinBox').show().spin(); 
    $.ajax({
      method: "POST",
      url: '/folder/page/',
      data: { param: "string_data" },
      success: function(data) {
        $('#result').html(data);
        $('#spinBox').hide().spin(false);
      }
    });
  });
  </script>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview