JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="count"></div>
<div class="prog" style="height:30px;width:1%;background:#dfdfdf;"></div>
<img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img>

JavaScript

var allImgs = $('img', document).length;
var counter = $('div.count');
var prog = $('div.prog');
var chunk = 100/allImgs;
var i = 1;


$('img', document).each(function(){
    var per = Math.round(chunk * i);
    prog.animate({ width : per },40,function(){
    counter.html(per + '%');
    });
    i++;
});

 setTimeout(function(){
       alert('loaded');
}, 10000);