JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">
<div id="loading-mask">
    <div id="loading"></div>
</div>

CSS

#loading-mask {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 100px;
    left: 100px;
    background-color: yellow;
}
#loading {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 100px;
    background-color: red;
}

JavaScript

var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');

loading.puff({
    duration: 500
}).animate({
    callback: function() {
        mask.slideOut('b', {
            duration: 500,
            listeners: {
                afteranimate: function() {
                    mask.destroy();
                    loading.destroy(); //third fn
                }
            }
        }); //second fn
    }
}); //first fn