Adding animation to blockUI

Question

I am using blockUI when loading pages with AJAX, as shown below:

function blockPage() {
    $.blockUI({ 
        message: 'Loading ...',
    }); 
}

What I would like to do is to animate the "dots" in the message. Something like:

var intVar = setInterval(function() {
    i = ++i % 5;
    $("#message").html("Loading "+Array(i+1).join("."));
}, 300);

Any pointers as to how i could do this would be greatly appreciated.

Answer 1

According the the BlockUI documentation, you can set a particular DOM element to be displayed.

For an example, I have created a JSBin.

What you do, is put the message in your document that you will display so you can reference it later.

<div id="message" style="display:none;"> 
    <h1>Loading</h1> 
</div> 

and then invoke it:

$(document).ready(function() { 
    $('#pageDemo4').click(function() { 
        $.blockUI({ message: $('#message') });
        startAnimation();                
    }); 
});

You will then also need to define your start animation and stop the animation functions.

var intervalId;
function startAnimation() {
   var i = 0;
   intervalId = setInterval(function() {
      i = ++i % 5;
      $("#message").html("Loading "+Array(i+1).join("."));
   }, 300);
}

function stopAnimation() {
  $.unblockUI();
  clearInterval(intervalId);
}

Call the stopAnimation when your AJAX request completes.