Grow your CSS skills. Land your dream job.

Last updated on:

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="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

Comments

  1. Avkash
    Permalink to comment#

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

  2. 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.

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

  4. 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)

  5. Yogesh
    Permalink to comment#

    thanks a lot.. :)

  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.

  7. Nina
    Permalink to comment#

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

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

  9. lakshman
    Permalink to comment#

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

  10. Permalink to comment#

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

    • Ebrahim

      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. Not working for me in Google Chrome.

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

  13. Ebrahim

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

    • @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;
      }
      
  14. ali
    Permalink to comment#

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

  15. nicolas
    Permalink to comment#

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

  16. Ricardo
    Permalink to comment#

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

  17. Rajesh
    Permalink to comment#

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

  18. Slapul
    Permalink to comment#

    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#

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

  19. Permalink to comment#

    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"/>
    
  20. Not working in chrome 33. Just shows the<img> element!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".