如何在HTML5 / CSS3中完全加载页面之前显示进度条？

Question

I want a Flash website for loading my html5/css3 webpage.

The page should only appear when it is completely rendered. Before it is displayed, a loading bar must appear.

How should I do that? Do I need something else apart from HTML5 and CSS3?

Please provide me with the tutorial.

Answer 1

Put a div at the beginning of your page (well this is a spinner and not a loading bar... but...)

    <div id="work-in-progress">
        <div class="work-spinner"></div>
    </div>

then using JQuery bind to the load event... which gets fired when the page is loaded

  $(window).bind("load", function () {
        $('#work-in-progress').fadeOut(100);
    });

and add some css to the div to

#work-in-progress {
  position: fixed;
  width: 100%;
  height: 100%;
  font-size: 150px;
  text-align: center;
  vertical-align: middle;
  color: #000000;
  z-index: 200000;
  background-color: #FFFFFF;
}

.work-spinner {
  background-color: rgba(0,0,0,0);
  border: 9px solid rgba(27,61,226,0.9);
  opacity: .9;
  border-left: 5px solid rgba(0,0,0,0);
  border-radius: 120px;
  -webkit-box-shadow: 0 0 35px #1B3DE2;
  box-shadow: 0 0 35px #1B3DE2;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  -moz-animation: spin .5s infinite linear;
  -webkit-animation: spin .5s infinite linear;
  -o-animation: spin .5s infinite linear;
  animation: spin .5s infinite linear;
}

@-moz-keyframes spin {
 from {
     -moz-transform: rotate(0deg);
 }
 to {
     -moz-transform: rotate(360deg);
 }
}

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

@keyframes spin {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
}
@-o-keyframes spin {
 from {
     transform: rotate(0deg);
 }
 to {
     transform: rotate(360deg);
 }
}

Answer 2

pimboden's answer is great, but it needs the actual keyframes to animate.

Here's the missing CSS:

@-moz-keyframes spin {
     from {
         -moz-transform: rotate(0deg);
     }
     to {
         -moz-transform: rotate(360deg);
     }
 }

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

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
 }
 @-o-keyframes spin {
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
 }

Answer 3

If you are using huge number of images and just want your users to wait until they get loaded instead of showing slowly revealing images you can use

https://github.com/alexanderdickson/waitForImages

Its pretty much all you may want because rest of the page is just text [if its normal size web page]. It will get loaded in no time.

Answer 4

That's a big question but I can push you in a direction:

$(window).load(function(){  
//initialize after images are loaded  
});  

Sometimes you want to manipulate/render pictures or webpages. For example you want to verticaly and horizontaly align a picture and you need to get the width and height of the picture in order to do that. With $(document).ready() you won't be able to do that if the visitor doesn't have the image already loaded, in which case you need to initialize the jquery alignment function when the image finishes loading.

Answer 5

Here may be a step in the right direction:

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

This only shows the website when everything is loaded!