treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Snippets

Illustration by Reagan Ray

Display Loading Graphic Until Page Fully Loaded

Last updated on: 

<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	
	
	<script src="http://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="http://farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
		
</body>

</html>

Reference URL

View Comments

Comments

  1. Avkash
    Permalink to comment#

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

    Reply ↓
  2. Billy Brown
    Permalink to comment#

    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.

    Reply ↓
  3. Thomas Vanhoutte
    Permalink to comment#

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

    Reply ↓
  4. Kilarith Duskleaf
    Permalink to comment#

    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)

    Reply ↓
  5. Yogesh
    Permalink to comment#

    thanks a lot.. :)

    Reply ↓
  6. sam
    Permalink to comment#

    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.

    Reply ↓
  7. Nina
    Permalink to comment#

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

    Reply ↓
  8. Kreativ Font
    Permalink to comment#

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

    Reply ↓
  9. lakshman
    Permalink to comment#

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

    Reply ↓
  10. Yousuf
    Permalink to comment#

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

    Reply ↓
    • Ebrahim
      Permalink to comment#

      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 …

  11. Chankey Pathak
    Permalink to comment#

    Not working for me in Google Chrome.

    Reply ↓
  12. novaona sklep
    Permalink to comment#

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

    Reply ↓
  13. Ebrahim
    Permalink to comment#

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

    Reply ↓

Leave a Comment

Use markdown or basic HTML and be nice.