show loading icon until the page is load?

Question

I wanted to show a loading icon to users until the page elements are fully loaded. How can I do that with javascript and I want to do it with javascript, not jquery?

Answer 1

add class="loading" in the body tag then use below script with follwing css code

body {
            -webkit-transition: background-color 1s;
            transition: background-color 1s;
        }
        html, body { min-height: 100%; }
        body.loading {
            background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
            -webkit-transition: background-color 0;
            transition: background-color 0;
            opacity: 0;
            -webkit-transition: opacity 0;
            transition: opacity 0;
        }

Use this code

var body = document.getElementsByTagName('body')[0];
var removeLoading = function() {
    setTimeout(function() {
        body.className = body.className.replace(/loading/, '');
    }, 3000);
};
removeLoading();

Demo: https://jsfiddle.net/0qpuaeph/