Creating A Loading Screen In Html5

May 30, 2023 Post a Comment

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

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

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

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

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

<divclass="demo-wrapper html5-progress-bar"><divclass="progress-bar-wrapper"><progressid="progressbar"value="0"max="100"></progress><spanclass="progress-value">0%</span></div></div>

Hope this will give you a start.

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

Html5 World