Progress Bar

progress-bar.js

//HTML
<!-- Refer to collective.js for loadscreen code. -->
<div id="overlay">
  <div id="progstat"></div>
  <div id="progress"></div>
</div>

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


//JS
//Display loading animation on pages with id of 'overlay'
;(function(){
  if( !document.getElementById("overlay")) {//if overlay is not detected, end.
    return;
  } else {
    function id(v){
      return document.getElementById(v);
    }
    function loadbar() {
      var ovrl = id("overlay"), //the loading overlay in collective-piece.html
      prog = id("progress"),
      stat = id("progstat"),
      img = document.images, //return collection of images in current document
      c = 0, //counter
      tot = img.length; //total amount of images
      if(tot == 0) return doneLoading();

      function imgLoaded(){//when an image loads
        c += 1;//add 1 to counter
        var perc = ((100/tot*c << 0)) +"%"; //left shit 0 to truncate the value. (no decimals)
        prog.style.width = perc; //apply a width based on percentage to prog.
        stat.innerHTML = "Loading "+ perc; //modify content in stat with value of Percentage
        if(c===tot) return doneLoading(); //if counter === total amount of images, callback doneLoading()
      }
      function doneLoading(){
        ovrl.style.opacity = 0; //set ovrl opactiy to 0
        setTimeout(function(){
          ovrl.style.display = "none"; //display none it after 1.2s
        }, 1200);
      }
      for(var i=0; i<tot; i++) {
        var tImg     = new Image(); //for every new image.
        tImg.onload  = imgLoaded; //when image onload calls imgLoaded
        tImg.onerror = imgLoaded; //when image onerror when loading an image
        tImg.src     = img[i].src;
      }
    }
    document.addEventListener('DOMContentLoaded', loadbar, false);//The DOMContentLoaded event triggers on document when the page is ready. It waits for the full HTML and scripts, and then triggers.
  }
}());