sencha loading icon before app startup screen

by admin on May 9th, 2013

In the index.html,  add a div in the body:

 <style type="text/css">
 #loading-mask {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: url(resources/img/indicator.gif) no-repeat;
 text-align: center;
 <div id="loading-mask"></div>
 <script type="text/javascript" src="app.js"></script>


In app.js, in the launch function, once all the app initialization is finished I remove the load mask with a fade animation:

if (Ext.get('loading')) {
 var loadmask = Ext.get('loading');, 'fade', {
 easing: 'out',
 duration: 500,
 after: function() {

 xtype: 'loadmask',
 message: 'Please wait...'

Create some view here and call


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>