Adding a loading mask to your ExtJS application

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:

&lt;div id=&quot;loading-mask&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;loading&quot;&gt;
  &lt;div class=&quot;loading-indicator&quot;&gt;
    Loading...
  &lt;/div&gt;
&lt;/div&gt;

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;
}

15 Responses to Adding a loading mask to your ExtJS application

  1. Jason Boxman says:

    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.)

  2. Extjs user says:

    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.

  3. Ed Spencer says:

    @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.

  4. Katija says:

    @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.

  5. Wayne says:

    @Ed nice work man, simple solution to annoying problem. You have my vote.

  6. cry30.dev says:

    Thanks.

    I’m using this code exactly as it is in my open source project, do you require any license?

  7. Ed Spencer says:

    @cry30.dev no license required (other than the normal Ext JS license of course) – feel free to use it wherever you like

  8. MrSparks says:

    @Ed

    Thank you! Nice work and very interesting to read about Yahoo’s javascript include recommendations.

  9. Suresh says:

    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?

  10. Pingback: extjstutorial.org

  11. surjeet says:

    Thanx sir,

  12. Ron says:

    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?

  13. Bill Qualls says:

    Just what I was looking for. Thank you.

  14. jaket motor says:

    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!

  15. Ed Spencer says:

    @jaket it’s wordpress (still back on version 3.4.2… need to update that)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 2,608 other followers

%d bloggers like this: