JSFiddle - React, Tailwind, and code Playground

by stopsatgreen

HTML

<button>Go</button>

CSS

button {
    background-color: blue;
    border: none;
    color: white;
    font-size: 128px;
    margin: 1em;
    min-width: 5em;
    padding: 0.25em 1em;
    vertical-align: middle;
}
button.loading::before {
    content: url('http://broken-links.com/tests/images/spinner.png');
    line-height: 0.8;
    vertical-align: middle;
}
button.done { background-color: red; }

JavaScript

var btn = document.querySelector('button');
btn.addEventListener('click', function() {
    //btn.className = 'loading';
    setTimeout(function(){
        btn.className = 'done';
    }, 3000);
});