put loading bar before anything loaded on browser

Question

I am working with bootstrap and I want to put a bootstrap progress bar with percent for page loading and when ever that progress bar width reached 100% the page show in browser. How can I do this? I have sample of bootstrap progress bar with jsfiddle link Jsfiddle but how can I set it for page loading

var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 40);
    }
    $bar.text($bar.width() / 4 + "%");
}, 800);

In short: there is no way to know how much the page has loaded using JS. http://stackoverflow.com/questions/4999703/preload-with-percentage-javascript-jquery — Terry, Nov 22 '14 at 15:01

Gonsalo Sousa · Answer 1 · 2014-11-22T17:57:38.643

You can get the amount of time it took to be loaded, like so:

    //Gets the loading time in milliseconds 
    var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
    //Start time
    var timestart= (new Date).getTime();

    var progress = setInterval(function () {
        var time = ((new Date).getTime() - timestart)/10;
        var $bar = $('.bar');
        var width=Math.round((((time*400)/loadTime)*100)/400);
        if (width >= 100) {
            clearInterval(progress);
            $('.progress').removeClass('active');
        }
        width=width>100?100:width;
        $bar.width(width+"%");
        $bar.text(width+"%");
    }, 1000/10);

put loading bar before anything loaded on browser

1 Answers1