title: Jquery-How to grey out the background while showing the loading icon over it
body: <p>I'm trying to grey out the background when a user clicks on the submit button and show the loading icon over the greyed background. </p>
  
  <p>below is the icon im trying to show, however I'm not able to show the animation, the icon just stays still.</p>
  
  <p><img src="https://i.stack.imgur.com/BqHu1.gif" alt="enter image description here"></p>
  
  <p>Here is my html:</p>
  
  <pre><code> &lt;div class="container"&gt;&lt;/div&gt;
   &lt;div id="loading-img" style=" z-index: 20;display:none;"&gt;&lt;/div&gt;
   &lt;button id="button"&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> $("#button").click(function() {
      $("#container").css("opacity",0.5);
      $("#loading-img").css({"display": "block"});
  }
  </code></pre>
  
  <p>I'm not sure how exactly to use the css for making the icon animate over the grey background. Any ideas please??
  EDIT::::</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/hnk6bLbt/1/" rel="noreferrer">http://jsfiddle.net/hnk6bLbt/1/</a></p>
  
  <p>Thanks!</p>