JSFiddle - React, Tailwind, and code Playground

by Will L

HTML

<div class="begin">Begin</div>
<div class="clear">Clear</div>
<div class="progress running">Running...</div>
<div class="progress done">Done.</div>

CSS

div {
    color: white;
    float: left;
    font-size: 2em;
    height: 2em;
    line-height: 2em;
    margin: 0.1em;
    padding-left: 1em;
    width: 50%;
}
.progress {
    display: none;
}
.running {
    background: red;
}
.done {
    background: green;
}
.begin {
   background: black;   
}
.clear {
   background: black;   
}
.begin:active, .clear:active {
   opacity: 0.5;   
}

JavaScript

var showProgress = function(x){
    $(".progress").hide();
    $(x).show();   
}

var step1 = function(){
    var def = $.Deferred(); 
    showProgress(".running");
    return def.promise();
};

var step2 = function(){
    var def = $.Deferred(); 
    for(var i = 0; i < 1000000000; ++i) 
        i = i + 1; 
    return def.promise();
};

var step3 = function(){
    var def = $.Deferred(); 
    showProgress(".done");
    return def.promise();
};

var success = function(){
  console.log("success")   
};

var failure = function(){
  console.log("failure")   
};

$(".begin").click(function(){
  $.when(step1(), step2(), step3()).then(success, failure);
});

$(".clear").click(function(){
  $(".progress").hide();   
});