A simple example of how to use Jquery deferred progress callback with a Jquery UI progress bar for real-time updates

A simple example of how to use Jquery deferred progress callback with a Jquery UI progress bar for real-time updates

Javascript -----------------

<script type="text/javascript">
       var countUpTimer;
       var countUp_number = -10;
       var deferred = $.Deferred();
       var promise = deferred.promise();

       $(document).ready(function () {
           $("#progressbar").progressbar();

           $("#fail").click(function () {
               deferred.reject();
           });

           function result() {
               alert("Done!");
           }

           function failed() {
               $("#progressbar").css({
                   'background': 'red'
               });
           }

           function inProgress() {
               $("#progressbar").progressbar({
                   value: countUp_number
               });
               $("#progressbar > span").html(countUp_number + "%");
           }

           function countUp() {
               if (countUp_number < 100) {
                   countUp_number += 10;
                   deferred.notify();
                   countUpTimer = setTimeout(countUp, 500);
               } else {                  
                   deferred.resolve();
               }
           }

           promise.done(result);
           promise.fail(failed);
           promise.progress(inProgress);

           countUp();
       });
        </script>
   
html progress bar --------

        <div id="progressbar" style="margin: 0px 0px 16px 0px;"><span style="position: absolute;text-align: center;margin: 5px 0 0 47%;"></span></div>
    <center><input id="fail" type="button" value=" Fail Now " /></center>

You can fiddle with it at  http://jsfiddle.net/hodgepodge/Xv8nD/