very simple script loding bar

script_loding_bar.css

#scriptProgressBar {
  position: fixed;
  width: 0;
  top: 0;
  left: 0;
  z-index: 1031;
  height: 3px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 10px #29d;
  box-shadow: 0 0 10px #29d;
  -webkit-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

script_loding_bar.html

<div id="scriptProgressBar"></div>

script_loding_bar.js

<script type="text/javascript">
  (function() {
    var scriptProgressBar = document.getElementById('scriptProgressBar');
    var setProgress = function(number) {
      scriptProgressBar.style.width = number + '%';
      if (number == 100) {
        setTimeout(function() {
          scriptProgressBar.parentNode.removeChild(scriptProgressBar);
        }, 1000);
      }
    };
    setProgress(10);
    document.onreadystatechange = function () {
      if (document.readyState === "interactive") setProgress(40);
      if (document.readyState === "complete") setProgress(80);
    };
    window.onload = function() {
      setProgress(100);
    };
  })();
</script>