Animation during request

Animation during request

When performing AJAX request is useful somehow inform the user about it. For it you can show the image with animation. For this in the FullAJAX library is available option loader. Example:

FLAX.Filter.add({url:'/', loader:'myloader', id:'forFullAjax'});

Add image in the page template:

<img id="myloader" src="path/to/image/ajax-loader.gif" alt="Loading..."></img>

#myloader {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  display: none; 
}

For more advanced animation effect you can use any favorite JavaScript library (MooTools, jQuery etc.). Use FLAX.Effect for call animation:

FLAX.Effect.add({id: 'Request-ID',
  start:function(id, request){
    //here code for animation after click before request
    request(); // do request, execute this when animation ends
  },
  end:function(){
    // here code for animation after request
  }
});

Request-ID should be equal ID that used in FLAX.Filter or in hax() method