JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.9.1/ember.min.js"></script>
<script type="text/x-handlebars">
    <button {{bind-attr class='isProcessing:btn-disabled'}} {{action 'savePost'}}>savePost</button>

</script>

CSS

.btn-disabled {
    color: white;
    background-color: limegreen;
}

JavaScript

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({

    isProcessing: false,
 
    actions: {
    
    savePost: function() {
    
        this.set('isProcessing', true);
        Em.run.next(this, function() {
            //just some synchronous code that takes some time (the time inbetween the two alerts)
            var i=0,a;
            alert('start code');
            while (i++ < 10000000) {
                a = Math.pow(i, Math.pow(1/i, Math.sin(i)))/3/4/5/5 * Math.log(i);
            }
            this.set('isProcessing', false);
            alert('finished code');
        });
        
        
        
    }

    }
})