JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="per">
    <div class="vloading"></div>
    <div class="num">0%</div>
</div>
<img src="http://www.anypics.ru/images/201211/anypics.ru_30413.jpg">
<img src="http://www.freakingnews.com/pictures/46500/Tea-Break-time---46906.jpg">
<img src="http://www.kelly-beezus.com/wp-content/uploads/2012/08/tea.jpg">
<img src="http://static.admagazine.ru/iblock/b7e/TeaTimeTable_01_HR.jpg">
<img src="http://www.modernmom.com/sites/default/files/featured/read_play_watch/02/teatimecover.jpg">
<img src="http://2krota.ru/uploads/posts/2010-06/1275815982_91.jpeg">
<img src="http://www.rockymountaineer.com/en_US_CA/images/public/library/2010/whistler_mountaineer/interior/WM_GD_AfternoonTea-big.jpg">
<img src="http://0.tqn.com/d/nutrition/1/0/A/5/greenteasx.jpg">

CSS

* {
    padding:0;
    margin:0;
}
body {
    font-family:Calibri;
    font-size:62.5%;
}
.per {
    position:absolute;
    overflow:hidden;
    width:350px;
    font-size:120%;
    left:50%;
    top:30%;
    border:1px solid silver;
    margin-left:-156px;
    height:30px;
    line-height:30px;
    text-align:center;
}
.num {
    text-indent:10px;
    width:100%;
    position:absolute;
}
.vloading {
    height:100%;
    position:absolute;
    width:0%;
    background:#dfdfdf;
}
img {
    width:80px;
    height:60px;
}
.keepw {
    background:silver;
}

JavaScript

var i = 1;
var load1 = $('div.per');
var imgs = $('img', document);
var imgL = imgs.length;
var chunk = 100 / imgL;

Progress(i, showINFO);

function Progress(i, callback) {
    imgs.bind('load', function () {
        $('.vloading').animate({ width: Math.round(i * chunk) + "%"}, 10);
        $('.num').html("Content loaded by " + Math.round(i * chunk) + "%");
        if (Math.round(i * chunk) === 100) {
            $('.num').html("Loaded, thank you");
           
        } else {
            i++;
            Progress(i);
        }
    });
}



function showINFO() {
    load1.delay(2000).fadeOut('fast');
}