JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/eggplant/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<div id="A"></div>
<div id="P"></div>
<button id="G">Go!</button>

CSS

#A{
    background-color: red;
    width: 100px;
    height: 100px;
}

JavaScript

(function() {
    var $P = $('#P').progressbar();
    window.a = function() {
        var d = new $.Deferred,
            $A = $('#A');

        setTimeout(function() {
            $A.css('background-color', 'blue');
            d.notifyWith($P, [.5]);
            d.resolve('a()');
        }, 2000);

        return d.promise();
    }

    window.b = function() {
        var d = new $.Deferred,
            $A = $('#A');

        setTimeout(function() {
            $A.text('test');
            d.notifyWith($P, [.5]);
            d.resolve('b()');
        }, 4000);

        return d.promise();
    }
}())

$('#G').click(function() {
    $.when(a(), b()).progress(function(x, y) {
        this[ 0 ].progressbar({
            value: ((x || 0) + (y || 0)) * 100
        });
    }).done(function(x, y) {
        alert(x + ' ' + y)
    });
});