title: ajax loading gif in tab panel
body: <p>I'm trying to show a gif during an Ajax call; it works fine if the div is at the body level but won't appear in a tab panel. I've tried putting the div at the tab-pane, container, row and column levels but it won't show.
  Simple html:</p>
  
  <pre><code> &lt;div id="loading"&gt;
       &lt;img id="loading-image" src="images/page-loader.gif" alt="waiting..." /&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$('#loading').hide(); $('#loading').show(); // as required
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
  }
  
  #loading-image {
   position: absolute;
   top: 10px;
   left: 24px;
   z-index: 100;
  }
  </code></pre>