Edit in JSFiddle

//

var now_position=0; //プログレスバーの現在の位置
var all_img = $("img"); //すべての画像
var img_len = all_img.length; //画像の総数
var loaded_counter = 0; //読み込み完了の数値
var loading = $("#loader"); //プログレスバーの要素
var timer = null;

//アニメーションスタート
startAnime();

//
for (var i = 0; i < img_len; i++) {
    all_img[i].addEventListener("load", loadFunc);
}

//
function loadFunc() {
    //読みこんだ画像の数をカウントしておく
    loaded_counter++;
    
    $("#num").text("読み込まれた画像の数　：　" + loaded_counter);
 
}

function startAnime() {
    if (!timer) {
        timer = setInterval(loadingFunc, 33);
    }
}


function stopAnime() {
  
    clearInterval(timer);
    timer = null;
    $("#res").text("読み込みが完了しました！").fadeIn(500, function () {
        $("#loader-wrap").fadeOut(1000);
        $(all_img).delay(1000).fadeIn(1500);
    });
}

//
function loadingFunc() {

    if (now_position > 99.9) {
        now_position = 100;
        stopAnime();
    }
    
     // 読み込んだ画像のパーセンテージ
　　var target_position = (loaded_counter/img_len) * 100;
    //プログレスバーの目的の位置までイージングの設定
    now_position+= (target_position - now_position) * 0.2;
    $("#test").text("読み込み量：" + Math.floor(now_position));
   
    $(loading).css("width", now_position + "%");
}

<h1>JavaScriptでプログレスバーで画像を読み込むアニメーションをやってみた！</h1>


<p id="res">現在、画像を読み込み中です！</p>
<p id="num"></p>
<p id="test"></p>
<div id="loader-wrap">
    <div id="loader"></div>
</div>
<img src="http://placeimg.com/640/480/people" />
<img src="http://placeimg.com/640/480/animals" />
<img src="http://placeimg.com/640/480/arch" />
<img src="http://placeimg.com/640/480/nature" />
<img src="http://placeimg.com/640/480/tech" />
<img src="http://placeimg.com/640/480/people" />
<img src="http://placeimg.com/640/480/animals" />
<img src="http://placeimg.com/640/480/arch" />
<img src="http://placeimg.com/640/480/nature" />
<img src="http://placeimg.com/640/480/tech" />
<img src="http://placeimg.com/640/480/people" />
<img src="http://placeimg.com/640/480/animals" />
<img src="http://placeimg.com/640/480/people" />
<img src="http://placeimg.com/640/480/animals" />
<img src="http://placeimg.com/640/480/arch" />
<img src="http://placeimg.com/640/480/nature" />
<img src="http://placeimg.com/640/480/tech" />
<img src="http://placeimg.com/640/480/people" />
<img src="http://placeimg.com/640/480/animals" />
<img src="http://placeimg.com/640/480/arch" />
<img src="http://placeimg.com/640/480/nature" />
<img src="http://placeimg.com/640/480/tech" />
<img src="http://placeimg.com/640/480/people" />
<img src="http://placeimg.com/640/480/animals" />
<img src="http://placeimg.com/640/480/people" />
<img src="http://placeimg.com/640/480/animals" />
<img src="http://placeimg.com/640/480/arch" />
<img src="http://placeimg.com/640/480/nature" />
<img src="http://placeimg.com/640/480/tech" />
<img src="http://placeimg.com/640/480/people" />
<img src="http://placeimg.com/640/480/animals" />
<img src="http://placeimg.com/640/480/arch" />
<img src="http://placeimg.com/640/480/nature" />
<img src="http://placeimg.com/640/480/tech" />
<img src="http://placeimg.com/640/480/people" />
<img src="http://placeimg.com/640/480/animals" />
<img src="http://placeimg.com/640/480/animals" />
<img src="http://placeimg.com/640/480/arch" />
<img src="http://placeimg.com/640/480/nature" />
<img src="http://placeimg.com/640/480/tech" />
<img src="http://placeimg.com/640/480/people" />
<img src="http://placeimg.com/640/480/animals" />

<img src="http://placeimg.com/640/480/arch" />
<img src="http://placeimg.com/640/480/nature" />
<img src="http://placeimg.com/640/480/tech" />
<img src="http://placeimg.com/640/480/people" />
<img src="http://placeimg.com/640/480/animals" />
<img src="http://placeimg.com/640/480/tech" />
<img src="http://placeimg.com/640/480/people" />
<img src="http://placeimg.com/640/480/animals" /

body {
    padding:10px;
}
h1{
    font-size:16px;
    border-bottom:1px solid #ccc;
    margin-bottom:15px;
    padding-bottom:15px;
}
p{
    font-size:12px;
    margin-bottom:15px;
}
img {
    width:50px;
    display:none;
}
#loader-wrap {
    width:100%;
    height:10px;
    background-color:#cdcdcd;
}
#loader {
    width:0px;
    height:10px;
    background-color:#17cddd;
}