Calculate & Display percentage of progress of page load

Question

I have a loader which loads when page loads at the starting. I need to show the percentage of completion in it.

My application has lots of jquery and css included in it and it also include a ajax call.

As of now, I have displayed the progress bar when page load starts and hided it when the ajax completed successfully.

Also, I have displayed the percentage but increased it manually using the below code:

function timeout_trigger() {
    $(".progress").css("max-width", p + "%");
    $(".progress-view").text(p + "%");
    if (p != 100) {
        setTimeout('timeout_trigger()', 50);
    }
    p++;
}
timeout_trigger();

The problem here is, before the progress reaches 100, the page loads and the content is displayed and hence the loader is hided in between let say - at 60% - the loader is hided.

I want to calculate the percentage of page load completion (ie. jquery loading time, css loading time etc) dynamically and increase the progress accordingly.

Please help to get through this..

Possible duplicate of [How to show a running progress bar while page is loading](http://stackoverflow.com/questions/18981909/how-to-show-a-running-progress-bar-while-page-is-loading) — OddDev, Nov 20 '15 at 07:18
Mention this answer (is not accepted and thus far down south ;P) http://stackoverflow.com/a/22319239/2641361 — OddDev, Nov 20 '15 at 07:21
Possible duplicate of http://stackoverflow.com/questions/11072759/display-a-loading-bar-before-the-entire-page-is-loaded ? — Roko C. Buljan, Jan 05 '16 at 21:01

score 16 · Answer 1 · edited May 23 '17 at 12:03

You can use this:

Source: Display a loading bar before the entire page is loaded

Script

<script>
        ;(function(){
          function id(v){ return document.getElementById(v); }
          function loadbar() {
            var ovrl = id("overlay"),
                prog = id("progress"),
                stat = id("progstat"),
                img = document.images,
                c = 0,
                tot = img.length;
            if(tot == 0) return doneLoading();

            function imgLoaded(){
              c += 1;
              var perc = ((100/tot*c) << 0) +"%";
              prog.style.width = perc;
              stat.innerHTML = "Loading "+ perc;
              if(c===tot) return doneLoading();
            }
            function doneLoading(){
              ovrl.style.opacity = 0;
              setTimeout(function(){ 
                ovrl.style.display = "none";
              }, 1200);
            }
            for(var i=0; i<tot; i++) {
              var tImg     = new Image();
              tImg.onload  = imgLoaded;
              tImg.onerror = imgLoaded;
              tImg.src     = img[i].src;
            }    
          }
          document.addEventListener('DOMContentLoaded', loadbar, false);
        }());
    </script>

HTML (At the starting of body or at the end)

<div id="overlay">
            <div id="progstat"></div>
            <div id="progress"></div>
        </div>

CSS

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}
#progress{
  height:1px;
  background:#fff;
  position:absolute;
  width:0;
  top:50%;
  transition: 1s;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}

The code will populate a overlay on site and there will be a progress bar for the whole content of site, that will be fadeout when site has been complete loaded. you can see a working example here: http://hestawork.com/playfer/public/home — Anshul Mishra, Nov 20 '15 at 07:53
@Roko C. It might be copied from there, because I have used that about a year ago in my project, so I do not remember from where I have get this code so I have just provided the code that I have used. I have shared the link of my project in which it is implemented. — Anshul Mishra, Jan 06 '16 at 04:59

Andrew Evt · Accepted Answer · 2015-11-20T07:30:00.060

function timeout_trigger() {
   $(".progress").css("max-width",p+"%");
   $(".progress-view").text(p+"%");
   if(p!=100) {
       setTimeout('timeout_trigger()', 50);
   }
   p++;
}
timeout_trigger();

This code will work only when you download 1% per 50ms, if download goes faster - if will fail.

It must be something like this:

var size = file.getsize(); // file size

function timeout_trigger() {
   var loaded = file.getLoaded(); // loaded part
   p = parseInt(loaded / size);

   $(".progress").css("max-width",p+"%");
   $(".progress-view").text(p+"%");
   if(p!=100) {
       setTimeout('timeout_trigger()', 20);
   }
}
timeout_trigger();

To realise method getLoaded() you can use AJAX event onprogress (I hope you are loading files async). Check Monitoring Progress part here https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

shall i know whats the 'file' in 'file.getsize()'. I have lots of Js and css files.. how i should get the file size?? — user3211705, Nov 20 '15 at 07:26
thay are not standart methods, thay must be realised, it's just an example to you, how your task can be done. Read about **Monitoring Progress** first, and then just realise tham. — Andrew Evt, Nov 20 '15 at 07:33

Calculate & Display percentage of progress of page load

2 Answers2

Linked