title: Creating a transparent loading overlay
body: <p>Using the same markup <em>(shown below)</em>, is it possible to add a style which creates a transparent background overlay i.e. a loading overlay? When I try to add a background to <code>.loading</code> CSS it only adds it to the background of the <code>.loading</code> element and not the body. The style <code>.loading</code> gets removed (via jQuery) so ideally I want the overlay to be somehow be connected to <code>.loading</code>, if possible? </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class=loading style-2&gt;
      content
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.loading {
    position: fixed;
    top: 1px;
  
    margin: 5em;
    border-width: 30px;
    border-radius: 50%;
    -webkit-animation: spin 1s linear infinite;
       -moz-animation: spin 1s linear infinite;
         -o-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
    }
  
  .style-1 {
    border-style: solid;
    border-color: #444 transparent;
    }
  
  .style-2 {
    border-style: double;
    border-color: #ccc transparent;
    }
  
  .style-3 {
    border-style: double;
    border-color: #444 #fff #fff;
    }
  
  @-webkit-keyframes spin {
    100% { -webkit-transform: rotate(359deg); }
    }
  
  @-moz-keyframes spin {
    100% { -moz-transform: rotate(359deg); }
    }
  
  @-o-keyframes spin {
    100% { -moz-transform: rotate(359deg); }
    }
  
  @keyframes spin {
    100% {  transform: rotate(359deg); }
    }
  </code></pre>