La création d'un transparent de chargement de superposition

En utilisant le même balisage (voir ci-dessous), est-il possible d'ajouter un style qui crée un arrière-plan transparent overlay c'est à dire un chargement de superposition? Lorsque j'essaie d'ajouter un arrière-plan .loading CSS cela ne fait qu'ajouter à l'arrière-plan de la .loading élément et non le corps. Le style .loading est supprimé (via jQuery) donc, idéalement, je veux la superposition d'être en quelque sorte être connecté pour .loading, si 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); }
  }