[SOLVED] Loading animation

[Brandon Jaeger]

Hey guys,

 

I've searched all over for hours now and I can't find an example anywhere...

 

I want to have a script for when the user hits the submit button in a form, it covers the whole page in a transparent color and displays a loading GIF in the middle (for 2-3 seconds), then disappears.

 

Does anyone know how to do that?

 

Thanks,

Brandon

[F1Fan]

Use the JS onunload event in the body tag.

 

Do you just want it to display for 2-3 seconds, or do you want it to display until the page is finished loading?

[Brandon Jaeger]

I just want it to display for a predefined amount of time.

 

When it comes to JS/Ajax, I'm a complete noob. I'm more of a PHP/C++ guy, so I'm going to need an example, if you can, please.

 

Thanks

[F1Fan]

This can be done with just JavaScript and CSS.

 

Put this at the top of your HTML page:

<table width="100%" height="100%" bgcolor="#FFFFFF" cellpadding="5" id="pleasewait" style="display:none;z-index:1;position:absolute;left:0px;top:0px;">
<tr height="225">
	<td width="100%" colspan="3">
		 
	</td>
</tr>
<tr>
	<td width="49%">
		 
	</td>
	<td align="center" valign="middle" width="2%" nowrap bgcolor="#FFFFFF" style="border: solid 1px black;">
		Please wait...<br>
		<image src="images/pleasewait.gif">
	</td>
	<td width="49%">
		 
	</td>
</tr>
</table>

 

Then in your JS function that runs when you're calling your AJAX, just add this in the function:

document.getElementById('pleasewait').style.display = "block";

 

You may have to do a little more than that, but it should get you started. Also, I just posted something similar on another topic, and you can grab the peasewait.gif there:

http://www.phpfreaks.com/forums/index.php/topic,219292.0.html

[Brandon Jaeger]

Thanks!