Deferred Progress

by Jose Montero

HTML

<div id="progressbar" style="margin: 0px 0px 16px 0px;"><span style="position: absolute;text-align: center;margin: 5px 0 0 45%;"></span>

</div>
<center>
    <input id="fail" type="button" value=" Fail Now " />
</center>

JavaScript

var countUpTimer;
var countUp_number = -10;
var deferred = $.Deferred();
var promise = deferred.promise();

$(document).ready(function () {
    $("#progressbar").progressbar();
    $("#progressbar").css({
        'background': 'LightYellow'
    });
    $("#progressbar > div").css({
        'background': 'Orange'
    });
    
    $("#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();
});