JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div id="progressBar">
    <div></div>
</div>
<div class="img">
   
     <img src="http://img.mota.ru/upload/wallpapers/2010/11/16/19/04/23175/mota_ru_0111703-1680x1050.jpg">
     <img src="http://upload.wikimedia.org/wikipedia/commons/0/01/Bee_pollinating_a_flower.jpg">
     <img src="http://blog.rwbenwick.com/wp-content/uploads/2009/02/istock_000003339922medium.jpg">
     <img src="http://img.mota.ru/upload/wallpapers/2010/11/16/19/04/23175/mota_ru_0111703-1680x1050.jpg"> 
     <img src="http://lol54.ru/uploads/posts/2009-08/1251176294_bee-31.jpg">
</div>

CSS

img {
    float:left;
    width:100px;
    height:85px;
}
#progressBar {
    width:400px;
    margin:50px auto;
    height:30px;
    border:3px solid #dfdfdf;
}
#progressBar div {
    color:#fff;
    font-family:Calibri;
    font-weight:bold;
    text-align:center;
    height:100%;
    line-height:30px;
    width:0;
    background:red;
}

JavaScript

var numberOfImages = $('.img img').length,
    numberOfLoaded = 0,
    step = 100 / numberOfImages;


function progressBar(percent, $element) {
    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').animate({
        width: progressBarWidth
    }, 600).html(percent + "%&nbsp;");
}


$('.img img').each(function (i, item) {
    $(item).load(function () {
        numberOfLoaded++;
        progressBar(step * numberOfLoaded, $('#progressBar'));
    });
});