It's been awhile since we've put up an Ajaxian Featured Tutorial and so we're going to get back into the swing of things with a nice, simple tutorial using MooTools.
Giving users feedback during a "save" process is a very good idea. It allows the user to feel a sense of confidence that the site is responding and their data is being processed. While we're at it, why not make it look good as well? Antonio Lupetti has written a short tutorial which does just that.
My friend David asked to me how to implement a message box which appears when an user submit a form and disappear (with a nice fade effect after some seconds) when a generic Ajax request is completed.
In the image below, Antonio has described the sequence of effects:

To break it down, when the user submits the form, a message box will appear first giving the user an indicator that the save is in progress followed by a message to let them know that the save process has completed. The fade-out effect is very cool window dressing.
Antonio leveraged the MooTools JavaScript library for this tutorial which, apart from making the code a trivial task, already includes their "fx" module which makes adding nice effects very easy.
Antonio has
created a demo to show off the results.