Progress bar using promises

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id="progress_bar" class="progress progress-striped active">
  <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">100% Complete</span>
  </div>
</div>

JavaScript

var ajax_html_loaded = function() {
    var defer = $.ajax({url: "/echo/html/"});
    return defer;
}

promises = [ajax_html_loaded];

$.when.apply($, promises).progress(function() {
    alert("OK");
});