JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="loader"><span id="load-text">0%</span></div>
<div id="content" style="display: none;"></div>
</body>

JavaScript

$(function() {
  Array.prototype.remove = function(element) {
    for (var i = 0; i < this.length; i++)
      if (this[i] == element) this.splice(i,1);
  };
  function preload(images, progress) {
    var total = images.length;
      $(images).each(function(){
      var src = this;
          $('<img/>')
        .attr('src', src)
        .load(function() {
          images.remove(src);
          progress(total, total - images.length);
        });
      });
  }
  var now_percent = 0;
  var displaying_percent= 0;
  preload([
    'https://www.pakutaso.com/assets_c/2015/11/SAWAasdfa-thumb-815xauto-19692.jpg'
  ], function(total, loaded){
    now_percent = Math.ceil(100 * loaded / total);
  });
  var timer = window.setInterval(function() {
    if (displaying_percent >= 100) {
      window.clearInterval(timer);
      $('#loader').fadeOut('slow', function() {
        $('<img />')
          .attr('src', 'https://www.pakutaso.com/assets_c/2015/11/SAWAasdfa-thumb-815xauto-19692.jpg')
          .appendTo('#content');
        $('#content').fadeIn('slow');

      });
    } else {
      if (displaying_percent < now_percent) {
        displaying_percent++;
        $('#load-text').html(displaying_percent + '%');
        $('#bar span').css('width', displaying_percent + '%');
      }
    }
  },
  5);
});