<!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>
Display Loading Graphic Until Page Fully Loaded
Chris Coyier
on
Thanks for sharing….. Actually I’m finding the same thing. Very helpful to me….
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.
i change image but still my is not working
Been trying to find a way without JavaScript, but until then, your solution will do the trick. Thanks.
God this was answered when i was just joining college.
Are you still coding Thomas?? :()
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)
thanks a lot.. :)
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.
Hello, about your question, you need to create session to trap when your homepage loaded already like example below,
IN PHP FILES WILL BE THE SEVER TYPE
Very nice !
It helps me so much, thanks :D !
Thanks a lot for this snippet … I’m using it on my chrome extension for fonts … ;)
this snippet is not working for me properly…
the download gif image is not loading properly….
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.
Hi, just as Mr. Laksman says, the snippet isn’t working, probably.
Could you check on it please?
remove .js and .no-js from the css part. Keep only onllowing:
Thus it’s working …
Not working for me in Google Chrome.
Hi, the link to modernizr.js seems to be broken and what does download.png looks like? I wish There was demo for this.
Spinners = http://www.ajaxload.info/
Modernizr = http://modernizr.com/
Chris, your link is good but I think you should know about http://preloaders.net/ This is the best preloader generator available online IMO. ;)
How can i show a black background while the loader is spinning ? Currently It’s in white background.
@Ebrahim,
You could do:
And then, once the page is loaded:
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:
thank you, but this won’t work. see page load documentations.
load event only fires when the page finished loading. Tested it with alert(“loading”) already.
use this url instead- this works :)
http://modernizr.com/downloads/modernizr-latest.js
It does not work in chrome also in safari too. It’s not working :(
This displays loader when page starts loading, but never hides after finished loading..
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
Slapul – would you mind posting entire code so that we may see for use. Having issues trying to replicate … Thanks in advance!
Thank you! That works for me. :-)
I tried many solutions, every one works different.
This one is the fastest. The full code would be :
i head you have
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.
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.
Not working in chrome 33. Just shows the
<img>
element!You can use pacejs @ http://github.hubspot.com/pace/ its a very good plugin, simple to use and no setup required
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 :)
This works like a charm for me. simple light and easy :)
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 ?
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 … :)
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
Thanks man, this is so useful
What is the point of
.js
and.no-js
if they don’t seem to be used at all? I am terribly confused.Please send me script of Slideshow in html/CSS
Directly linking scripts from Github won’t work in some browsers as the content type in the headers won’t be the right one.
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:
and this in CSS:
Please help, thank’s !! :)
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
/* 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”;
}