title: CSS loading screen issue
body: <p>I'm trying to show a loading area after a certain action from the user. I want to show the loading animation in the center of the screen while showing the rest of the page greyed out, in the background.</p>
  
  <p>At this point, my problem is that the loading animation is greyed out too, and I just want to grey out the background. The white box should be opaque but is a bit transparent too. Any help?</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>$('input[type=button]').click(function() {
    $("#shader").fadeIn();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.loadingContainer {
      width: 50%;
      height: 50%;
      overflow: auto;
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
  }
  
  .shader {
      width: 100%;
      height: 100%;
      background-color: black;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      position: fixed;
      opacity: 0.5;
      display: none;
  }
  
  #divLoading3 {
      border-radius: 40px;
      margin: auto;
      overflow: hidden;
      width: 100%;
      height: 100%;
      background-color: white;
  }
  
  #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
  }
  
  #loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #3498db;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
  }
  
  #loader:before {
      content:"";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #e74c3c;
      -webkit-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite;
  }
  
  #loader:after {
      content:"";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #f9c922;
      -webkit-animation: spin 1.5s linear infinite;
      animation: spin 1.5s linear infinite;
  }
  
  @-webkit-keyframes spin {
      0% {
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
      }
      100% {
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
  
  @keyframes spin {
      0% {
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
      }
      100% {
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;input type="button" value="load button"&gt;
  &lt;p&gt;background contents background contents background contents&lt;/p&gt;
  &lt;p&gt;background contents background contents background contents&lt;/p&gt;
  &lt;p&gt;background contents background contents background contents&lt;/p&gt;
  &lt;p&gt;background contents background contents background contents&lt;/p&gt;
  &lt;p&gt;background contents background contents background contents&lt;/p&gt;
  &lt;p&gt;background contents background contents background contents&lt;/p&gt;
  &lt;p&gt;background contents background contents background contents&lt;/p&gt;
  &lt;p&gt;background contents background contents background contents&lt;/p&gt;
  &lt;p&gt;background contents background contents background contents&lt;/p&gt;
  &lt;p&gt;background contents background contents background contents&lt;/p&gt;
  &lt;p&gt;background contents background contents background contents&lt;/p&gt;
  &lt;p&gt;background contents background contents background contents&lt;/p&gt;
  
  &lt;div id="shader" class="shader"&gt;
    &lt;div class="loadingContainer"&gt;
      &lt;div id="divLoading3"&gt;
        &lt;div id="loader-wrapper"&gt;
          &lt;div id="loader"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>See it full page for a better view</strong></p>