JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="temp">
    <img src="http://uploads3.wikipaintings.org/images/david-burliuk/tea-time-1.jpg">
    <img src="http://www.oboinka.ru/wallpapers/6d952f6424abd994da5862abf19cab7e/8840_5.jpg">
    <img src="http://s60.radikal.ru/i168/1010/b1/4e2987d16f1c.jpg">
    <img src="http://www.nettavisen.no/multimedia/na/archive/00847/Gr_nn_te_84757816x9.jpg">
</div>
<div class="temp2">
    <img src="http://www.wikihow.com/images/7/78/Tea-Set---I-love-it!-9566.jpg">
    <img src="http://flyinureye.files.wordpress.com/2010/06/tea-time.jpg">
    <img src="http://dianespuppetsproducts.files.wordpress.com/2013/04/tea-time-5.jpg">
    <img src="http://megalife.com.ua/uploads/posts/2009-05/1241551765_yptx_1014.jpg">
    <img src="http://prizrak.ws/uploads/0000/35/39/338507-1-f.jpg">    
</div>
        
        
<ul class="preload">
    <li>
        <div class="loadDiv"></div>
        <div class="progHold"> <span class="tagsS">Styles loaded by </span>
 <span class="loadBar">0%</span>

        </div>
    </li>
    <li>
        <div class="loadDiv"></div>
        <div class="progHold"> <span class="tagsI">Images loaded by </span>
 <span class="loadBar">0%</span>

        </div>
    </li>
</ul>

CSS

* {
    padding:0;
    margin:0;
}
body {
    font-family:Calibri;
    font-size:62.5%;
}
ul.preload {
    font-size:110%;
    list-style:none;
    width:200px;
    height:auto;
    margin:80px auto;
    left:50%;
    top:80px;
    margin-left:-102px;
    position:absolute;
}
ul.preload li {
    background:#f9f9f9;
    display:block;
    height:30px;
    float:left;
    width:100%;
    line-height:30px;
    position:relative;
    margin-bottom:2px;
    border:2px solid #eee;
}
div.loadDiv {
    z-index:100;
    position:absolute;
    height:100%;
    width:0%;
    background:#eee;
}
div.progHold {
    position:absolute;
    width:100%;
    float:left;
    z-index:100;
    height:100%;
}
span.tagsS, .span.loadBar {
}
span.tagsS, span.tagsI {
    padding:0 5px 0 10px;
}
span.loadBar {
    color:red;
    font-weight:bold;
}
.temp, .temp2 {
    opacity:0;
    z-index:-200;
    display:none;
    position:absolute;
}

JavaScript

var NameTagerStyle = $('span.tagsS');
var NameTagerImages = $('span.tagsI');
var ImgHolder2 = $('div.temp2');
var ImgHolder = $('div.temp');


$.when(ProgressBar(NameTagerStyle,ImgHolder)).done(ProgressBar(NameTagerImages,ImgHolder2));

function ProgressBar(element,myimages) {
    var ProgressDiv = element.parent('div').siblings('div');
    var ProgressCount = element.siblings('span');
    var imgAll = $('img',myimages);
    var imgLength = imgAll.length;
    var i = 100 / imgLength;
    var loadedImg = 0;
    var chunk = 1;
    imgAll.on('load', function () {
        ProgressDiv.animate({
            width: Math.round(i * chunk) + "%"
        }, 80);
        ProgressCount.html(Math.round(i * chunk) + " %");
        chunk++;

        if (++loadedImg === imgLength) {
            imgAll.off('load');
        }
    });
}