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(){
    showProgress(".running");
};

var step2 = function(){
    for(var i = 0; i < 1000000000; ++i) 
        i = i + 1; 
};

var step3 = function(){
    showProgress(".done");
};

$(".begin").click(function(){
    step1();
    setTimeout(step2, 0);
    setTimeout(step3, 0);
});

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