On pages that take more than a few seconds to complete, its a good idea to show some type of in-progress meter. Things like bulk email processing and large file uploads are good candidates. Often this doesn’t need to be as complicated as a real progress meter, where you show the actual percentage complete. Instead, an “in progress” meter just gives feedback to the user to let them know that something is going on.
I usually place a hidden element on the page, then use JavaScript to make it appear when the form is submitted. Something like:
<p style="visibility:hidden" id="inprogress">
<img id="inprogress_img" src="progress.gif">
Please Wait...
</p><input type="submit" onclick="document.getElementById('inprogress').style.visibility='visible'">
Note that there is an image used in the in-progress message, this is important. A static “Please Wait” message tells your user they should wait, but without the feedback of the moving image, they could still get the impression something is locked up. You can get some awesome free progress meters from http://www.ajaxload.info.
Of course Internet Explorer throws a wrench into things. IE will stop any animated gifs from animating when the form is submitted. This is a problem in IE6 and 7. This is far worse than having no progress meter, since it appears as if something has locked up. But there is a work around. We just need to kick start the animation after the form submits. We do this by resetting the source of the image with JavaScript. We have to reset the src after the form submits, and the form submits when our function returns. So we make use of the setTimeout function, which executes a line of JavaScript after a specified number of milliseconds. We’ll also throw in an anti-double submit feature similar to what I mentioned in my last post.
<script language="JavaScript">
var submitted = false;
function doSubmit() {
if (! submitted) {
submitted = true;
ProgressImg = document.getElementById('inprogress_img');
document.getElementById("inprogress").style.visibility = "visible";
setTimeout("ProgressImg.src = ProgressImg.src",100);
return true;
}
else {
return false;
}
}
</script><input type="submit" onclick="return doSubmit()">
If your form is long enough that it needs scroll bars, be sure to place the in-progress message where the user will see it when they click the submit button.
Ikesacolick says:
Good solution. Thank You.
One small issue. To get this to work, you need to set the id=’inprogress_img’ in the img tag as in:
img id=”inprogress_img” src=”progress.gif”
7 March 2007, 2:52 pmRyan Stille says:
Good call, I missed that in my example. Its been updated now.
7 March 2007, 3:03 pmgesmith says:
Thanks for this very good solution. No thanks to IE and all of it’s headaches. :X
26 March 2007, 8:14 amAndrew Violette says:
Perfect. Worked like a charm!
10 April 2007, 1:59 pmStephen Scotti says:
I’m wanting to do something like this also, but instead of submitting a form I’m using a
28 July 2007, 8:50 pmaearly says:
Nice solution! Glad you found a way around this problem.
10 December 2007, 5:16 pmAndrisi says:
Nice, but how (where) do I hide the progress image?
6 January 2008, 4:41 amMJJ says:
Hi can i know how to hide the progress image when the processing is over? Thanks!
14 March 2008, 4:02 amMuthu says:
Thanks ! Can you let me know, if there is a way to keep the position of the image dyanmic? next to cursor/ mouse pointer ?
27 June 2008, 11:08 amGary says:
With the ajaxload noted above this was the perfect solution for what I was trying to do. Thanks much!
27 January 2009, 2:45 amTolenca says:
Thanks…thanks…thanks a lot
12 September 2009, 11:08 pmMike says:
Hi,
Love this post! Trying to implement, but don't see…
1) Where you submit the form, and
2) Where you check if submit successful, and
3) Then reset to "hidden".
Can you help me with this.
I'm a rookie, so go easy on me… 🙂
Thanks Mike
20 September 2009, 4:38 pmmanfred says:
Thanks a lot!!!! It works flawlessly and you saved me HOURS!!!
15 April 2010, 3:43 pmManfred
dickintw says:
Thanks! This did the job for me but it took a lot of trial and error to get it to work. In my version of the doSubmit() function, I was also changing the class name on another element:
document.getElementById('other-big-eye-catching-box').className = 'pleasewait-now';
The progress bar never became visible until I put this line after the setTimeout() call.
(Tested in FF3.6.3 and IE 8.0.7600).
9 June 2010, 3:01 pmdickintw says:
Thanks! This did the job for me but it took some trial and error to get it to work. In my version of the doSubmit() function, I was also changing the class name on another element:
document.getElementById('other-big-eye-catching-box').className = 'pleasewait-now';
The progress bar never became visible until I put this line after the setTimeout() call.
(Tested in FF3.6.3 and IE 8.0.7600).
9 June 2010, 3:05 pmAdam says:
Fantastic stuff – thanks a million – one question, and it may be a CSS thing, but because I want my loading box to be say 200px high, how do I have it so that it won't take up that room on the page before the page has been submitted and the loader initiated.
I've tried 'display:none' but then it doesn't display the loader once the page has been submitted.
This is the bit I'm referring to:
<p style="visibility:hidden" id="inprogress">
15 June 2010, 7:57 am<img id="inprogress_img" src="progress.gif">
Please Wait…
</p>
Ryan says:
Adam I would think display:none would work, but to turn it on you'll have to use style.display='block' instead of style.visibility='visible'.
15 June 2010, 8:01 amAdam says:
Thanks Ryan for that – I've tried changing it on this line:
document.getElementById("inprogress").style.visibility = "visible";
to
document.getElementById("inprogress").style.display= "block";
but it doesn't appear then – just leaves space for it.
Any ideas? Cheers
15 June 2010, 8:11 amRyan says:
So a space for it does appear? But its just a blank white space? Sounds like you still have visibility:hidden still set on some element.
15 June 2010, 8:15 amAdam says:
but when I take visibility: hidden off the inprogress element the loader appears as soon as I navigate to the page.
15 June 2010, 8:20 amRyan says:
If you have display:none set on the outer element it shouldn't display at all. You shouldn't need to have visibility:hidden on there also.
If you do decide to have visibility:hidden on there, then of course you also need to reset that at the same time you reset the 'display' attribute.
…
15 June 2010, 8:23 amdocument.getElementById("inprogress").style.visibility = "visible";
document.getElementById("inprogress").style.display = "block";
…
Adam says:
You're a star!!!
thanks very much.
15 June 2010, 8:32 amKirk says:
Thank you! The web is such a great place because of people like you!
15 June 2010, 11:04 amSebastian says:
You save me…. I was two days trying to solve this issue. Thanks a lot!
22 September 2010, 11:20 amJohn says:
Thank you for this solution!!
18 May 2011, 6:16 amDan says:
Outstanding! Thanks for the post.
IE still broken on version 9, but this fixed it.
I used a simpler version – only a hidden image tag on the page.
function appear()
19 December 2011, 2:14 am{
ProgressImg = document.getElementById(‘processing’);
ProgressImg.style.visibility = ‘visible’;
setTimeout(“ProgressImg.src = ProgressImg.src”,100);
}
So the only extra line needed for IE compared to my original was the setTimeout()
amod says:
Hi thanks for cool sol. i want to set its display time to until its browser close. how can i achieve?
20 December 2011, 12:39 amBrij says:
I am still getting the non animated icon/image when I click on the submit button.
Below given is the code
10 January 2012, 2:18 amif (! submitted) {
alert(“test”);
submitted = true;
ProgressImg = document.getElementById(‘inprogress_img’);
ProgressImg.style.display = “block”;
setTimeOut(“ProgressImg.src = ‘C:\\130.gif'”,1000);
return true;
}
else {
return false;
}
brij says:
I am still getting the non animated icon/image when I click on the submit button.
Below given is the code
if (! submitted) {
alert(“test”);
submitted = true;
ProgressImg = document.getElementById(‘inprogress_img’);
ProgressImg.style.display = “block”;
setTimeOut(“ProgressImg.src = ‘C:\\130.gif’”,1000);
return true;
}
else {
return false;
}
Can someone help?
10 January 2012, 2:19 amRegards
Crimson Kate says:
Excellent!! Really, really helpful. Works perfectly. Thank you so much for sharing this. 🙂
28 March 2012, 4:11 amjustin says:
i got error
Uncaught TypeError: Cannot read property ‘style’ of null
Please help me
16 July 2012, 7:47 amPEDRO FERREIRA says:
Thank you for the excellent, elegant, and light solution.
4 October 2012, 8:56 amSalute from Rio!