Animated progress/loading bar upon form submit - Javascript
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.
HTML Code:
<span style=”visibility:hidden;” id=”progress”/><img id=”progress_image” style=”padding-left:5px;padding-top:5px;” src=”http://www.adminspoint.com/images/ajax-loader.gif” alt=”"> Uploading in progress…<span>
This is the javascript function that triggers and displays the image and the text.
HTML Code:
<script type="text/javascript">
function loadSubmit() {
var ProgressImage = document.getElementById(’progress_image’);
document.getElementById(”progress”).style.visibility = “visible”;
setTimeout(function(){ProgressImage.src = ProgressImage.src},100);
return true;
</script>
}
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.
HTML Code:
<input id=”contSubmit” onclick=”return loadSubmit()” src=”http://www.adminspoint.com/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!