JSFiddle - React, Tailwind, and code Playground

by Roman Zhak

HTML

<div class="loaded">
    <div id="fraction"></div>
    <div class="percent"><span>0</span>%</div>  
</div>

CSS

.loaded {
  position: relative;
  width: 507px;
  height: 37px;
  border: 5px solid rgb(182, 182, 182);
  border-radius: 9px;
}

#fraction {
   width: 0px;
   height: 37px;
   color: #fff;
   background: rgb(73, 148, 194);
   border-radius: 4px
}

.prev {
  display: inline-block;
  margin: 3px;
  width: 300px;
  height: 200px;
  opacity: 0;
  overflow: hidden;
}

.percent {
   position: absolute;
   top: 0px;
   right: -65px;
   width: 59px;
   padding: 10px 0px;
   color: #fff;
   font-weight: bold;
   text-align: center;
   background: rgb(73, 148, 194);
   border-radius: 4px
}

span, div {
  margin: 0px;
  padding: 0px;
  line-height: 100%;
}

JavaScript

function has( object, prop ) {
  return ({}).hasOwnProperty.call( object, prop );
}

function extend( target, source ) {
    for (var name in source ) if(has(source, name)) {
      target[name] = source[name];   
    }
  return target;
}

function cache( prefix ) {
  this.prefix = prefix || "";  
}

 extend( cache.prototype , {
     storage : {},
     set     : function( key, value ) {
       this.storage[this.prefix + key] = value; return this;  
     },
     get     : function( key ) {
       return this.storage[this.prefix + key];  
     }
 });

var delimiter = { percent : "%" }

function checkDimention( el ) {
  if ('naturalHeight' in el) 
      return (el.naturalHeight + el.naturalWidth) === 0;
    return (el.width + el.height) === 0;
}

function load( objects ) {
  if( typeof objects === "string") objects = [ objects ];
    var 
      i         = 0
    , length    = objects.length
    , target
    , guid      = 0
    , response  = { 
        success  : null, 
        progress : null, 
        error    : null,
        int      : function( p ) {
          return ( p * 100 ) + delimiter.percent;  
        },
        on       : function( type , fn ) {
         if( typeof type === "object" ) extend( this, type );
          else  ( type in this ) && ( this[type] = fn ); 
         return this;   
        }
      };
    
    for( ; i < length; i++ ) extend( new Image(), {
      onload : function() {
        if( checkDimention( this ) ) return this.onerror();
        if( response.progress ) response.progress( this, ++guid / length );
        if ( guid === length )  response.success && response.success();
      },
      onerror : function() {
        if( response.error ) {
            ++guid && response.error( this.src );   
         }
       },
      src : objects[i]
     });
    return response;
   };

    var el = $("#fraction")
     ,  p =  $(".percent > span")
     ,  data = new cache("_img_");
    
    var r = load([
     "h.png",
    ...