Now, we can implement logic to apply an effect for the big picture we have already displayed. Applying the effect to such a big picture takes some time, so I would like to implement a pre-loader to display it while it is processing. Here is the code I added in the app/LoadMask.js
file:
Ext.define('Imaginary.LoadMask', { extend: 'Ext.LoadMask', xtype: 'loadmask', config: { message: '', html: '<div class="loader"> <div class="item-1"><span></span></div> <div class="item-2"><span></span></div> <div class="item-3"><span></span></div> <div class="item-4"><span></span></div> <div class="item-5"><span></span></div> <div class="item-6"><span></span></div> </div>', zIndex: 3000 } });