Creating a loading screen in HTML5

Question

I am having some issues finding a decent tutorial for generating a loading style screen with regards to HTML5. To be quite honest I'm not sure exactly where to begin...

My project is essentially a simple HTML5 game, where I'll be loading in various sprite sheets and tilesets. They'll be reasonably small, but I'd like to show a little loading spinner instead of a blank screen while all the resources are loaded.

Much appreciated if somebody could point me in the right direction, be it decent links or code samples to get me going...my Google-fu is lacking today!

---

For clarification, I need to figure out how to load the resources themselves, as opposed to finding a spinner. For instance, how to calculate that X% has loaded.

---

Edit 2

Silly me, I can just check for <variable>.image.complete . Voted to close.

Answer 1

This website is excellent for animated loading gifs: http://ajaxload.info/ . An overlay can be used to display the image and also prevent interaction with the page while it is loading. You can use a div, position it above everything else ( z-index ) and set the width and height to 100% .

Answer 2

An old question, but it is usefull to know that the Image object also has an onload event. It is often way better to use that than check for complete in for example a loop.

Example usage (not actually checked if working):

var numImagesLoaded = 0;
function incrementAndCheckLoading(){
    numImagesLoaded++;
    if(numImagesLoaded == 2){
        // Do some stuff like remove loading screen or redirect to other URL
    }
}    

image1 = new Image();
image1.src = "image1.jpg"
image1.onload = incrementAndCheckLoading;
image2 = new Image();
image2.src = "image2.jpg"
image2.onload = incrementAndCheckLoading;

Answer 3

This is an excellent resource for demonstrating HTML5 CSS animation. http://slides.html5rocks.com/#css-animation

 @-webkit-keyframes pulse {
  from {
    opacity: 0.0;
    font-size: 100%;
  }
  to {
    opacity: 1.0;
    font-size: 200%;
  }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

This demonstrates how to create a loading status bar: http://slides.html5rocks.com/#semantic-tags-2

 <progress>working...</progress>

There are plenty of other examples on those slides as well that may have what you're looking for.

Answer 4

You can use <progress> element in HTML5. See this page for source code and live demo. http://purpledesign.in/blog/super-cool-loading-bar-html5/

here is the progress element...

<progress id="progressbar" value="20" max="100"></progress>

this will have the loading value starting from 20. Of course only the element wont suffice. You need to move it as the script loads. For that we need JQuery. Here is a simple JQuery script that starts the progress from 0 to 100 and does something in defined time slot.

<script>
        $(document).ready(function() {
         if(!Modernizr.meter){
         alert('Sorry your brower does not support HTML5 progress bar');
         } else {
         var progressbar = $('#progressbar'),
         max = progressbar.attr('max'),
         time = (1000/max)*10, 
         value = progressbar.val();
        var loading = function() {
        value += 1;
        addValue = progressbar.val(value);
        $('.progress-value').html(value + '%');
        if (value == max) {
        clearInterval(animate);
        //Do Something
 }
if (value == 16) {
//Do something 
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something 
}
if (value == 72) {
//Do something 
}
if (value == 1) {
//Do something 
}
if (value == 86) {
//Do something 
    }

};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>

Add this to your HTML file.

<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
 <progress id="progressbar" value="0" max="100"></progress>
 <span class="progress-value">0%</span>
</div>
 </div>

Hope this will give you a start.

Answer 5

Because this question is tagged with html5 - I think we can do better than a spinner gif. A more modern alternative:

http://fgnass.github.io/spin.js/