Edit in JSFiddle

var timer;
var prgValue = 10;
$('#resultbar').html('waiting…');

var promise = process();
promise.done(function (data) {
    $('#resultbar').html(data);
});
promise.progress(function () {
    $('#resultbar').html("Progressing " + prgValue + "%");
    $('#resultbar').css('width', prgValue+'%').attr('aria-valuenow', prgValue);
    prgValue += 10;
});

function process() {
    var deferred = $.Deferred();

    timer = setInterval(function () {
        deferred.notify();
    }, 1000);

    setTimeout(function () {
        clearInterval(timer);
        deferred.resolve("resolved");
    }, 10000);

    return deferred.promise();
}

<div id='result' />
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;" id="resultbar"></div>
</div>