JSFiddle - React, Tailwind, and code Playground

by holoverse

HTML

<div id="btn">CLICK TO DO WORK</div>
<div id="success"></div>

CSS

body {
    font-family:Arial;
}
#btn {
    background:#1f1f1f;
    padding:20px;
    font-weight:bolder;
    color:#fff;
    width:50%;
    margin:auto;
    margin-top:50px;
    border-radius:15px;
    text-align:center;
    box-shadow: 3px 3px 15px #888888;
    border:3px solid #6e6e6e;
    cursor:pointer
}
.done {
    color:lime;
    font-size:40px;
}
#success {
    font-size:22px;
    padding:80px;
    margin:auto;
}

JavaScript

$("#btn").on("mousedown", function () {
    $('#btn').html('<p>Processing...</p><br><img src="http://i246.photobucket.com/albums/gg102/holoverse/ajax-loader.gif" border="0" alt=" photo ajax-loader.gif"/>').css('background', '#fff').css('color', '#000');
}).on('mouseup', longFunc);

function longFunc() {
    //Do your long running work here... :)    
    for (i = 1; i < 1003332300; i++) {}
    $('#btn').html('<span class="done">DONE :)</span>').css('background', '#003300');
    $('#success').html('Your Script Ran Successfully...<br><b>'+i+' iterations</b> complete...<br>Thank you for waiting....').show();
}