How to create a loading screen while my content is still loading (intro)

Hey guys I have been searching the web for hours now and I cannot find a decent resource for this. I am working on my website and I will to add some cool loading screen while my content is loading in the background and when it’s done loading fades off or something similar .

I am trying to use jquery to accomplish this so here’s my code.

HTML (just under the body)

<div class="loader"></div>


/*loading screen*/
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('../img/45.gif') 50% 50% no-repeat rgb(249,249,249);
	opacity: .8;


$(window).load(function() {

Here is a screen shot of what happens the loading screen is still on after my site has completed loading.

I just need to know remove , fade or slide the loading screen OUT

Thanks for the help guy.

It’s strange that this isn’t working. Do you see any errors in your console?

Just an obvious question… do you have the jQuery script (CDN or local copy) loaded?

Yes there are other scripts for animation and so on and I do everything locally not with CDN

As for my console error here’s what I get:

Please I am still a n00b so I cannot say what is wrong in my code.

Thanks again guys

Hello, I am looking for help, I am even making a loading screen, but the content I put on the body has a lot of content and because the loading screen only covers half of all the content I put. Help, I am new. And excuse my English, I’m Mexican and I don’t speak much English