Display Loading Graphic Until Page Fully Loaded

<!DOCTYPE html> <html class="no-js"> <head>	<meta charset='UTF-8'>	<title>Simple Loader</title>	<style>	/* This only works with JavaScript, if it's not present, don't show loader */	.no-js #loader { display: none; }	.js #loader { display: block; position: absolute; left: 100px; top: 0; }	</style> 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 	<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>	<script>	// Wait for window load	$(window).load(function() {	// Animate loader off screen	$("#loader").animate({	top: -200	}, 1500);	});	</script> </head> <body> 	<img src="download.png" id="loader"> 	<img src="//farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg"> </body> </html>

Comments

Avkash

# April 27, 2011

Thanks for sharing….. Actually I’m finding the same thing. Very helpful to me….

Billy Brown

# June 25, 2011

Seems really good, just; I’d change the
<img src=”download.png” id=”loader”>
to
<img src=”download.gif” id=”loader”>
Otherwise it wouldn’t be animated.

rajat

Permalink to comment# November 20, 2013

i change image but still my is not working

Thomas Vanhoutte

# July 9, 2012

Been trying to find a way without JavaScript, but until then, your solution will do the trick. Thanks.

noobs

Permalink to comment# October 2, 2021

God this was answered when i was just joining college.
Are you still coding Thomas?? :()

Kilarith Duskleaf

# August 1, 2012

This doesn’t seem to work with swf content embedded on the page.

If you look here, the loading symbol stays even when the content is fully loaded. Any way to work on this ?
Test (online 08/01/2012)

Yogesh

# September 10, 2012

thanks a lot.. :)

sam

# November 7, 2012

hi.. thanks for the tutorial.. i applied this loader to the home page.. and when i go to other page and come back to home page the loader play’s again.. how to make the loader work once.. and not the when coming back from other pages.

Mark Calma

# October 6, 2014

Hello, about your question, you need to create session to trap when your homepage loaded already like example below,

img#loader{ display:none; }

//this will not be seen when page load due to css $(window).load(function() { $.ajax({ url: 'trap.php', type: 'get', success: function(visited){ if (visited==0){//when not yet visited $('#loader').css("display","block"); }else{ $('#loader').css("display","none"); } } }); });

IN PHP FILES WILL BE THE SEVER TYPE

<?php if (!isset($_SESSION['trap'])||empty($_SESSION['tap'])){ $_SESSION['tap']=0; echo '1'; }else{ $_SESSION['trap']=1; echo '1'; }

Nina

# December 3, 2012

Very nice !
It helps me so much, thanks :D !

Kreativ Font

# December 5, 2012

Thanks a lot for this snippet … I’m using it on my chrome extension for fonts … ;)

lakshman

# January 2, 2013

this snippet is not working for me properly…
the download gif image is not loading properly….

Mark Calma

Permalink to comment# October 6, 2014

hello, kindly setup the style of the image just like width=”50″ height=”50″ or make some css if your familiar with it. if you want some example just pm me.

Yousuf

# February 9, 2013

Hi, just as Mr. Laksman says, the snippet isn’t working, probably.
Could you check on it please?

Ebrahim

# May 12, 2013

remove .js and .no-js from the css part. Keep only onllowing:

 #loader { display: none; background:#000; } #loader { display: block; position: absolute; left: 100px; top: 0;background:#000; }

Thus it’s working …

Chankey Pathak

# April 5, 2013

Not working for me in Google Chrome.

Nik

# November 16, 2017

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

$(window).load(function() { $(".loader").fadeOut("slow"); });

novaona sklep

# April 11, 2013

Hi, the link to modernizr.js seems to be broken and what does download.png looks like? I wish There was demo for this.

Chris Coyier

Permalink to comment# April 11, 2013

Spinners = http://www.ajaxload.info/

Modernizr = http://modernizr.com/
Smartik

Permalink to comment# October 9, 2013

Chris, your link is good but I think you should know about http://preloaders.net/ This is the best preloader generator available online IMO. ;)

Ebrahim

# May 12, 2013

How can i show a black background while the loader is spinning ? Currently It’s in white background.

Alex Wright

Permalink to comment# August 22, 2013
@Ebrahim,
You could do:
```
<body class="black"> ... </body> 
```
And then, once the page is loaded:
```
$(window).load(function() { $('body').removeClass('black'); ... }); 
```
Don’t forget the css styles for the black class:

body.black { background-color: black; }

And if you want the transition to be animated from black to whatever the background color would be after load:
```
body { -webkit-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } 
```

ali

# June 18, 2013

thank you, but this won’t work. see page load documentations.

nicolas

# August 16, 2013

load event only fires when the page finished loading. Tested it with alert(“loading”) already.

JUNEINK

# August 26, 2013

use this url instead- this works :)
http://modernizr.com/downloads/modernizr-latest.js

Ricardo

# September 5, 2013

It does not work in chrome also in safari too. It’s not working :(

Rajesh

# November 8, 2013

This displays loader when page starts loading, but never hides after finished loading..

Slapul

# December 19, 2013

I made it work with

http://modernizr.com/downloads/modernizr-latest.js

<script> $(window).load(function() { $("#page").show(); $("#loader").hide(); }); </script>

after body i display an image

<img src="http://preloaders.net/images/ajax-loader.gif" id="loader">

then everything till end of body is in a div with id=”page”

This way until the page fully loads the only thing that is displayed is an gif animation

JayPaul

Permalink to comment# February 17, 2014

Slapul – would you mind posting entire code so that we may see for use. Having issues trying to replicate … Thanks in advance!
Carrie

Permalink to comment# May 30, 2014

Thank you! That works for me. :-)
Slapul

Permalink to comment# July 14, 2014
I tried many solutions, every one works different.
This one is the fastest. The full code would be :
i head you have
```
$(window).load(function() { $("#page").show(); $("#loader").hide(500); }); 
```
When the page is fully loaded the animated gif is swapped with the page div.

Pace script works too and is more customizable very nicely, but it is slow and is showing even after the page is loaded. I use this one when working with very large queries and fits perfectly.

Sid

# February 23, 2014

if someone wants a no-js solution
displays a loading gif until the image loads and hides behing the image as it loads. quite easy but a bit different from the js solution above.

<style> img {background:url('loading.gif');background-repeat:no-repeat;background-position:center} </style> <img src="image.png" width="300" height="300"/>

Geordie Fischer

# April 11, 2014

Not working in chrome 33. Just shows the<img> element!

Razzbee

# June 5, 2014

You can use pacejs @ http://github.hubspot.com/pace/ its a very good plugin, simple to use and no setup required

Sparky

Permalink to comment# July 4, 2014

Using my own copy of ‘modernizr-latest.js’ (link above), my own copy of ‘jquery.min.js’ and my own .gif, it works PERFECT in IE8, Chrome, and Firefox!! Very sweet code!! I never link to other sites for .js files. You never know when/if they are gonna load :)

Vini

# July 10, 2014

This works like a charm for me. simple light and easy :)

$(window).load(function(){ $('.loader').fadeOut(); });

Emi

# July 13, 2014

I have a problem here, the loader is beeing shown over the page content, instead of beeing shown on a black background ’till the page is fully loaded… What did I do wrong ?

Param Singh

# July 19, 2014

Hi,

This piece of code is working, the only thing you have to change is

http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js

and use this as your download image

http://sierrafire.cr.usgs.gov/images/loading.gif

I hope this helps … :)

Rohithzr

# July 30, 2014

I am not using Modernizer.js on my project yet so can you please tell me that which modernizr modules are used to achieve this so that i dont end up using the whole library when a shelf would suffice

Marcelo Brito

# January 19, 2015

Thanks man, this is so useful

Graham

# July 1, 2015

What is the point of .js and .no-js if they don’t seem to be used at all? I am terribly confused.

Irfan

# August 6, 2015

Please send me script of Slideshow in html/CSS

Giacomo Persichini

# February 9, 2016

Directly linking scripts from Github won’t work in some browsers as the content type in the headers won’t be the right one.

Raul

# March 30, 2016

Hey guys,

I`m working on this website https://storm-braces.herokuapp.com/ and I was wondering how can I make the logo after all the animation to move in the navigation menu (animated of course).

I got this in JS:

setTimeout(function () { $("#logo").animate({ height: "toggle" }, 1500); $(".intro-page").animate({ opacity: "toggle" }, 2000); }, 5500);

and this in CSS:

.leftBraket, .rightBraket, .first-text, .second-text { animation-duration: 1s; } .leftBraket, .rightBraket { animation-delay: 0.8s; } .first-text { animation-delay: 3.6s; } .second-text { animation-delay: 3.8s; } .tornado { transform-origin: 50% 50%; animation-name: spin; animation-duration: 2.4s; animation-delay: 1s; animation-timing-function: linear; animation-iteration-count: 1; } @keyframes spin { from { transform: scale(0) rotateY(0deg); } to { transform: scale(1) rotateY(360deg); } }

Please help, thank’s !! :)

Rafael Ferretto

Permalink to comment# August 8, 2020

Hello, you have the example of this code in operation.

I want to do something similar.
A GIF, objects in continuous motion, when the site loads, the objects come together and form the logo of the site.

I don’t know how to do it, I thought about using two GIFS.
Would you help me. thankful

Sunita

# May 24, 2016

/* Center the loader */
#loader {
width: 200px;
margin: 0 auto;
padding-top: 40px;
position: fixed;
align: center;
}

.path {
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: dash 2s ease-in-out;
-webkit-animation: dash 2s ease-in-out;
}

.spin {
animation: spin 2s;
-webkit-animation: spin 2s;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
}

p {
font-family: sans-serif;
color: pink;
font-size: 30px;
font-weight: bold;
margin: 20px auto;
text-align: center;
animation: text .5s linear .4s;
-webkit-animation: text .4s linear .3s;
}

@-webkit-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}

@keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}

@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

@-webkit-keyframes text {
0% {
opacity: 0; }
100% {
opacity: 1;
}

@keyframes text {
0% {
opacity: 0; }
100% {
opacity: 1;
}
}

#myDiv {
display: none;
}

Hello

var myVar;

function myFunction() {
myVar = setTimeout(showPage, 1000);
}

function showPage() {
document.getElementById(“loader”).style.display = “none”;
document.getElementById(“myDiv”).style.display = “block”;
}

Comments

Leave a Reply Cancel reply