title: Bootstrap Table loading progressbar overlay
body: <p>I have an Table somewhere in my HTML and an Pagination that loads the next page with ajax. 
  While loading the data i want to overlay an div with an Bootstrap progress-bar.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function loadingTable(divID) {
  
   var html = " &lt;div class='table-loading-overlay'&gt;"
    + " &lt;div class='table-loading-inner'&gt;"
    + "&lt;div class=\"col-xs-4 col-xs-offset-4\"&gt;"
    + "&lt;div class=\"progress\"&gt; "
    + "&lt;div class=\"progress-bar progress-bar-striped progress-bar-streit active\" role=\"progressbar\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 100%\"&gt;"
    + "        &lt;span class=\"sr-only\"&gt;Loading...&lt;/span&gt;"
    + "    &lt;/div&gt;"
    + "    &lt;/div&gt;"
    + " &lt;/div&gt;"
    + " &lt;/div&gt;"
    + " &lt;/div&gt;";
   $('#' + divID).append(html);
  }
  function prevPage(){}
  function nextPage(){}</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table-loading-inner {
      width: 100%;
      height: 100%;
  }
  .table-loading-overlay {
      width: 100%;
      height: 100%;
      position: relative;
      display: block;
      z-index: 10;
      background:  #000000;
      z-index: 100;
      opacity: 0.5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
   
    &lt;div id="userList"&gt;
     &lt;table class="table table-striped table-hover"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
       &lt;th&gt;Name&lt;/th&gt;
       &lt;th&gt;Status&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
       &lt;tr&gt;
                    &lt;td&gt;Test 1&lt;/td&gt;
                    &lt;td&gt;active&lt;/td&gt;
                    &lt;/tr&gt;                      
       &lt;tr&gt;
                    &lt;td&gt;Test 2&lt;/td&gt;
                    &lt;td&gt;active&lt;/td&gt;
                    &lt;/tr&gt;                      
       &lt;tr&gt;
                    &lt;td&gt;Test 3&lt;/td&gt;
                    &lt;td&gt;active&lt;/td&gt;
                    &lt;/tr&gt;
       &lt;tr&gt;
                    &lt;td&gt;Test 4&lt;/td&gt;
                    &lt;td&gt;active&lt;/td&gt;
                    &lt;/tr&gt;
       &lt;tr&gt;
                    &lt;td&gt;Test 5&lt;/td&gt;
                    &lt;td&gt;active&lt;/td&gt;
                    &lt;/tr&gt; 
      &lt;/tbody&gt;
     &lt;/table&gt;
     &lt;div&gt;
      &lt;span style="float:right;"&gt; 10 Users &lt;i class="fa fa-list"&gt;&lt;/i&gt;&lt;/span&gt;
     &lt;/div&gt;
     &lt;div class="paginator"&gt;
        &lt;span class="btn btn-default" onclick="prevPage();loadingTable('userList');"&gt; prev&lt;/span&gt;
        &lt;span class="btn btn-default"  onclick="nextPage();loadingTable('userList');"&gt;next&lt;/span&gt;
     &lt;/div&gt;
    &lt;/div&gt;   </code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I get the <code>table-loading-overlay</code> over the table?
  As the Table can be everywhere in the HTML I can't use absolute position...</p>