Images loaded progress bar

http://stackoverflow.com/q/15994397/145346

by Mottie

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="progress progress-info progress-striped active">
    <div class="bar" id='fabbar' style="width: 20%">0%</div>
</div>
<img src="http://placekitten.com/1000/1000" alt="" width="100" height="100" />
<img src="http://placehold.it/1000x1000" alt="" width="100" height="100" />
<img src="http://placebear.com/1000/1000" alt="" width="100" height="100" />
<img src="http://lorempixel.com/1000/1000" alt="" width="100" height="100" />
<img src="http://placedog.com/1000/1000" alt="" width="100" height="100" />

JavaScript

$(function () {
    var n = 0,
        $imgs = $('img'),
        val = 100 / $imgs.length,
        $bar = $('#fabbar');

    $imgs.load(function () {
        n = n + val;
        // for displaying purposes
        $bar.width(n + '%').text(n + '%');
    });
});