This piece of code displays an animated in progress bar after clicking the form submit.This is a good idea when your form is requiring large time when submitting information like file uploads.This will give the users the idea that the form action does not stuck up and is currently in progress.It does not require ajax,just javascript and some css and you can produce this animation.

First, you can download some cool,customizable and free loading icons at http://www.ajaxload.info. Then for the code:

Initially we will set the text and the image visibility to hidden.
You can put this code maybe beside your submit button so after clicking it the user can easily see the animation.

<p style=”visibility:hidden;” id=”progress”/><img id=”progress_image” style=”padding-left:5px;padding-top:5px;” src=”images/ajax-loader.gif” alt=”"> Uploading in progress…<p>

This is the javascript function that triggers and displays the image and the text.

function loadSubmit() {

ProgressImage = document.getElementById(’progress_image’);
document.getElementById(”progress”).style.visibility = “visible”;
setTimeout(”ProgressImage.src = ProgressImage.src”,100);
return true;

}

The setTimeout function is for IE 6 and 7 users.This is because IE will stop any animated gifs from animating when the form is submitted.So we will display the image first(the animated one) then return the function to true.When the function returns to true, that is the time the form will submit,thus the users will see the loading icon first before the form submits.

Then trigger the function upon clicking your submit button.

<input class=”contSubmit” onclick=”return loadSubmit()” src=”images/submitinfo_btn.jpg” type=”image” />

Basically,that’s it.Just change the path of the images to where your images resides.Feel free to email me if you have any questions/suggestions.Thanks!