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/arche/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">
    <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>
<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;
*/
}
.temp img, .temp2 img {
    width:100px;
    height:80px;
}

JavaScript

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


ProgressBar(NameTagerStyle, ImgHolder, ProgressBar(NameTagerImages, ImgHolder2, Nowa));

//pass arguments to loaders
function ProgressBar(element, myimages, callback) {
    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 percentLoaded = 0;
    var chunk = 1;

    imgAll.bind('load', function () {
        ProgressCount.html(Math.round(i * chunk) + " %");
        ProgressDiv.animate({
            width: Math.round(i * chunk) + "%"
        }, 10);
        chunk++;
        percentLoaded += Math.round(i);
        if (percentLoaded >= 100 && callback && typeof (callback) === "function") {
            callback();
            return;
        }
    })
        .on('error', function () {
        ProgressCount.html(Math.round(i * chunk) + " %");
        ProgressDiv.animate({
            width: Math.round(i * chunk) + "%"
        }, 10);
        chunk++;

    });
}

function Nowa() {
    setTimeOut(ImgHolder2.hide('slow'), 3000);
}