HTML

CSS

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color:rgba(226,10,35,.95);
  transition: 1s 0.4s;
}
#progress{
  height:10px;
  /*background:#fff;*/
  background-color:rgba(255,255,255,1);
  position:absolute;
  width:0;
  top:0px;
}
#progstat{
  font-family: 'BenchNine', sans-serif;
  font-size:2.1em;
  letter-spacing: 1px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}

JS:

//preloader
;(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;

    function imgLoaded(){
      c += 1;
      var perc = ((100/tot*c) << 0) +"%";
      prog.style.width = perc;
      stat.innerHTML = "TOMATIZING "+ perc;
      if(c===tot) return doneLoading();
    }
    function doneLoading(){
      ovrl.style.opacity = 0;
      setTimeout(function(){ 
        ovrl.style.display = "none";
      }, 1200);
    }
    for(var i=0; i

Tu opinión es importante para mi, ¿Te ha resultado útil este artículo?
SI
NO