title: How to set a overlay div loading image
body: <p>I want to show a loading image as overlay div in my ajax search time.</p>
  
  <p>my code</p>
  
  <pre><code>&lt;script&gt;
  function showHint(str) {
    if (str.length==0) { 
      document.getElementById("result").innerHTML="";
      return;
    }
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) {
        document.getElementById("result").innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","search_result.php?q="+str,true);
    xmlhttp.send();
  }
  &lt;/script&gt;
  
  
  &lt;input name="keyword" id="keyword" type="text" onkeyup="showHint(this.value)""/&gt;
  </code></pre>
  
  <p>result show in this table</p>
  
  <pre><code>&lt;div class="table-wrapper"&gt;
      &lt;table class="openings" id="result"&gt;
  
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my current code correctly show in this table but only need to add a overlay loading.</p>
  
  <p>Also when i search any thing then it show correctly but after typing if i delete search keyword from box then result area will be blank.</p>