page-loading-progress.md

Took it from https://rekit-portal.herokuapp.com/element/src%252Findex.html/code

(function() {
  var loadingNode = document.getElementById('loading-node');
  var textNode = loadingNode.childNodes[0];
  var barNode = loadingNode.childNodes[1];
  var req = new XMLHttpRequest();

  // report progress events
  req.addEventListener('progress', function(evt) {
    var percentComplete = (evt.loaded || 0) / (evt.total || 2348700);
    if (percentComplete > 1) percentComplete = 1;
    var percent = Math.round(percentComplete * 100, 10) + '%';
    textNode.innerHTML = 'Loading...' + percent;
    barNode.style.width = percent;
  }, false);

  // load responseText into a new script element
  req.addEventListener('load', function(evt) {
    window.setTimeout(function() {
      // timeout to ensure 100% progress bar.
      var scriptNode = document.createElement('script');
      scriptNode.innerHTML = evt.target.responseText;
      document.getElementsByTagName('head')[0].appendChild(scriptNode);
    }, 0);
  }, false);

  // TODO: handle load error

  req.open('GET', '/static/main.js');
  req.send();
})();