JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<body>



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

  <div id="container">
    <img src="http://placehold.it/3000x3000/cf5">
    <img src="http://placehold.it/3000x3000/f0f">
    <img src="http://placehold.it/3000x3000/fb1">
    <img src="http://placehold.it/3000x3000/ada">
    <img src="http://placehold.it/3000x3000/045">
    <img src="http://placehold.it/3000x3000/b00">
    <img src="http://placehold.it/3000x3000/41b">
    <img src="http://placehold.it/3000x3000/098">
    <img src="http://placehold.it/3000x3000/987">
    <img src="http://placehold.it/3000x3000/f25">
    <img src="http://placehold.it/3000x3000/526">
    <img src="http://placehold.it/3000x3000/826">
    <img src="http://placehold.it/3000x3000/ad6">
    <img src="http://placehold.it/3000x3000/74c">
    <img src="http://placehold.it/3000x3000/b40">
    <img src="http://placehold.it/3000x3000/cc7">
    <img src="http://placehold.it/3000x3000/112">
    <img src="http://placehold.it/3000x3000/113">
  </div>



</body>

CSS

* {
  margin: 0;
}

body {
  font: 200 16px/1 Helvetica, Arial, sans-serif;
}

img {
  width: 32.2%;
}

#overlay {
  background: #ccc;
  position: fixed;
  z-index: 999;
  bottom: 0;
  width: 100%;
  height: 0vh;
  transition: transform 1.5s ease-in-out;
}

#progress {
  height: 1px;
  background: #fff;
  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: #fff;
}

JavaScript

(function() {
  function id(v) {
    return document.getElementById(v);
      stat = id("progstat"),
      container = id("container"),
  }

  function loadbar() {
    var ovrl = id("overlay"),
      prog = id("progress"),
      img = document.images,
      c = 0;
    tot = img.length;
    var decrease = 100;

    function imgLoaded() {
      c += 1;
      var perc = ((100 / tot * c) << 0) + "%";
      var percvh = ((100 / tot * c) << 0) + "vh";
      ovrl.style.height = percvh;
      decrease = decrease - perc;
      prog.style.width = perc;
      stat.innerHTML = "Loading " + perc;
      if (c === tot) return doneLoading();
    }

    function doneLoading() {
      setTimeout(function() {
        ovrl.style.height = '100vh';
        ovrl.style.transform = "translate3d(0, -100%, 0)";
        //ovrl.style.transition = "transform 2s ease-in-out";
      }, 1200);
    }
    for (var i = 0; i < tot; i++) {
      var tImg = new Image();
      tImg.onload = imgLoaded;
      tImg.onerror = imgLoaded;
      tImg.src = img[i].src;
    }
  }

  if (document.readyState !== 'loading') {
    console.log('document is already ready, just execute code here');
    loadbar();
  } else {
    document.addEventListener('DOMContentLoaded', function() {
      console.log('document was not ready, place code here');
      loadbar();
    });
  }



}());