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

<

Answer 1

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/

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

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.