Adding a loading mask to your ExtJS application
February 1, 2009 15 Comments
Adding a loading mask like the one on the ExtJS API application is a nice way of showing the user that something is happening while their browser downloads the source code. It’s also extremely easy to do.
First, place the following HTML above all of your javascript include tags, ideally just after the <body> tag:
<div id="loading-mask"></div>
<div id="loading">
<div class="loading-indicator">
Loading...
</div>
</div>
If you are currently including javascript files inside the <head>, don’t – put them at the bottom.
With a bit of CSS (see below), this provides a white mask over all underlying content, and a loading message. When everything has loaded, remove the mask like this:
Ext.onReady(function() {
setTimeout(function(){
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250);
});
The above simply fades out the HTML elements to reveal the now ready page. The setTimeout call gives your app a little time to render, which is useful if you’re doing something like pulling external content down from the server.
Finally, here’s the CSS I use to style up the loading mask. You’ll need to download a loading image and stick it in the appropriate directory.
#loading-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 20000;
background-color: white;
}
#loading {
position: absolute;
left: 50%;
top: 50%;
padding: 2px;
z-index: 20001;
height: auto;
margin: -35px 0 0 -30px;
}
#loading .loading-indicator {
background: url(../images/loading.gif) no-repeat;
color: #555;
font: bold 13px tahoma,arial,helvetica;
padding: 8px 42px;
margin: 0;
text-align: center;
height: auto;
}
Ed Spencer 
That would be awesome in conjunction with ext-basex and JIT to lazy-load the framework in the background as it requires so little of ExtJS to work.(basex and JIT show up in an extjs forum search for those interested.)
This is a very nice tutorial although there is 1 very big bug. This bug should prevent people from using this solution.
When your page is very long and you have scrollbars and you are at the bottom of the page, when the loading mask is displayed there is a very good chance you won’t see the loading mask at all !!!.
The reason is very simple. If you place the loading mask at the top of the page (position absolute and top 0) then when you are the bottom of a long page the div will not be visible. Why doesnt the height 100% work. Very simple. Because the div is in the body tag. The body tag starts at the top of the page and is only as long as your screen, NOT the page!!!.
Nice try but your solutions fails with long pages.
@Extjs user all of my Ext JS applications are single-page apps using a Viewport, in which case this is not an issue. That kind of application is what Ext JS is best at – if you’re using Ext to progressively enhance another page you’ll have to find another way.
@extjs user – Get a life. Get a girlfriend 🙂 and most of all get a better design sense. Long boring pages are f-ugly and a poor use of ExtJS
@Ed spencer – You rock. This site rocks. Thank you for your wonderful and well explained examples and the effort you put in for the community in general.
@Ed nice work man, simple solution to annoying problem. You have my vote.
Thanks.
I’m using this code exactly as it is in my open source project, do you require any license?
@cry30.dev no license required (other than the normal Ext JS license of course) – feel free to use it wherever you like
@Ed
Thank you! Nice work and very interesting to read about Yahoo’s javascript include recommendations.
How can I get loading mask for the combo? My situation has made me to use mode:’local’, but I am expecting load mask shown in mode:’remote’, how to achieve this?
Pingback: extjstutorial.org
Thanx sir,
So am I supposed to put my includes in the head or body?
Can you give a quick example of what the head and body should look like with the loading div?
Just what I was looking for. Thank you.
Hi would you mind stating which blog platform you’re working with? I’m planning to start my own blog soon
but I’m having a tough time deciding between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking for something completely unique.
P.S My apologies for getting off-topic but I had to ask!
@jaket it’s wordpress (still back on version 3.4.2… need to update that)