Comments on: Animated in-progress indicator for long running pages

By: Kirk

Kirk — Tue, 15 Jun 2010 17:04:54 +0000

Thank you! The web is such a great place because of people like you!

By: Adam

Adam — Tue, 15 Jun 2010 14:32:14 +0000

You're a star!!!

thanks very much.

By: Ryan

Ryan — Tue, 15 Jun 2010 14:23:40 +0000

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.

…
document.getElementById("inprogress").style.visibility = "visible";
document.getElementById("inprogress").style.display = "block";
…

By: Adam

Adam — Tue, 15 Jun 2010 14:20:03 +0000

but when I take visibility: hidden off the inprogress element the loader appears as soon as I navigate to the page.

By: Ryan

Ryan — Tue, 15 Jun 2010 14:15:19 +0000

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.

By: Adam

Adam — Tue, 15 Jun 2010 14:11:56 +0000

Thanks Ryan for that – I've tried changing it on this line:

document.getElementById("inprogress").style.visibility = "visible";

document.getElementById("inprogress").style.display= "block";

but it doesn't appear then – just leaves space for it.

Any ideas? Cheers

By: Ryan

Ryan — Tue, 15 Jun 2010 14:01:05 +0000

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'.

By: Adam

Adam — Tue, 15 Jun 2010 13:57:43 +0000

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:

Please Wait…

By: dickintw

dickintw — Wed, 09 Jun 2010 21:05:18 +0000

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).

By: dickintw

dickintw — Wed, 09 Jun 2010 21:01:37 +0000

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).