Creating a transparent loading overlay

Question

Using the same markup (shown below), 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 .loading CSS it only adds it to the background of the .loading element and not the body. The style .loading gets removed (via jQuery) so ideally I want the overlay to be somehow be connected to .loading, if possible?

HTML

<div class=loading style-2>
    content
</div>

CSS

.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); }
  }

Answer 1

I was able to do a loading overlay but only with the addition of an extra container.

<div class="loading style-2"><div class="loading-wheel"></div></div>

http://jsfiddle.net/8k2NV/2/