This post originated from an RSS feed registered with Ruby Buzz by Edward Spencer. Original Post: Adding a loading mask to your ExtJS application Feed Title: Ed's Elite blog Feed URL: http://feeds2.feedburner.com/EdSpencer Feed Description: Ruby on Rails development, Git issues and ExtJS/JavaScript Latest Ruby Buzz Posts Latest Ruby Buzz Posts by Edward Spencer Latest Posts From Ed's Elite blog

<div id="loading-mask"></div>
<div id="loading">
  <div class="loading-indicator">
    Loading...
  </div>
</div>

Ext.onReady(function() {
  setTimeout(function(){
    Ext.get('loading').remove();
    Ext.get('loading-mask').fadeOut({remove:true});
  }, 250);
});

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