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!

    • Carrie

      Thank you! That works for me. :-)

    • Slapul
      Permalink to comment#

      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);
          });
      
      
      
      
      
        ........................(page content).........................
      

      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.

      http://github.hubspot.com/pace/

  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!

  21. Razzbee

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

    • Sparky

      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 :)

  22. Vini
    Permalink to comment#

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

    $(window).load(function(){
         $('.loader').fadeOut();
    });
    
  23. Permalink to comment#

    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 ?

  24. 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 … :)

Leave a Comment

Current day month ye@r *

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