Grey out background while page loading

Question

On my page I've got an animated image which runs when the page is busy loading. I've managed to get it to show when the page is busy and stop when the page is not busy. I'm struggling to get the page to grey out while this progress image runs... I've read about a div overlay, but it's not working. How do I do this? I'm new to javascript

This is what I've done:

In my asp.net I've got the following:

<div class="loading" align="center">
  <div class="main">
    <div class="small1">
      <div class="small ball smallball1"></div>
      <div class="small ball smallball2"></div>
      <div class="small ball smallball3"></div>
      <div class="small ball smallball4"></div>
    </div>

    <div class="small2">
      <div class="small ball smallball5"></div>
      <div class="small ball smallball6"></div>
      <div class="small ball smallball7"></div>
      <div class="small ball smallball8"></div>
    </div>

    <div class="bigcon">
      <div class="big ball"></div>
    </div>
  </div>
</div> 

My javascript is as follows:

<script type="text/javascript">

function ShowProgress() {
    setTimeout(function () {
        var loading = $(".loading");
        loading.show();
        $('#overlay').css({ 
          'display': 'block', 
          opacity: 0.7, 
          'width': $(document).width(), 
          'height': $(document).height() 
        });

        $('body').css({'overflow':'hidden'});

        $('#loading').css({ 'display': 'block' }).click(function () {
          $(this).css('display', 'none'); 
          $('#screen').css('display', 'none') 
        });            
    }, 200);

    $('#main').dialog({ modal: true });
}

$('form').live("submit", function () {       
    ShowProgress();
});

</script>

And my css looks like this:

body {
  padding: 0px;
  height:100%;
  background-color:#EBEBEB;
  filter:alpha(opacity=70);
  opacity:0.7;
  background-color: #002031;
}

.main {
    background-color:#EBEBEB;
    filter:alpha(opacity=70);
    opacity:0.7;
}

.small2 {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: transparent;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
}

.small1 {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 50vh;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: transparent;
}

.bigcon {
  position: absolute;
  height: 95px;
  width: 95px;
  top: 50vh;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(-45deg);
  background-color: transparent;
  animation: bigcon 2s infinite linear;
  animation-delay: 0.25s;
 }

.ball {
  border-radius: 50%;
  position: absolute;
}

 .small {
  width: 25px;
  height: 25px;
  animation: small 2s infinite ease;
  box-shadow: 0px 2px rgba(0,0,0,0.3);
  background-color: #46b9ff;
}

 .small:nth-child(1) {
   top: 0%;
   left: 0%;
 }
 .small:nth-child(2) {
   top: 0%;
   right: 0%;
 }

 .small:nth-child(3) {
   right: 0%;
   bottom: 0%;
 }

.small:nth-child(4) {
  bottom: 0%;
  left: 0%;
}

.big {
  width: 20px;
  height: 20px;
  border-radius: 15px;
  box-shadow:0px 0px 10px #54f7f8, 0px 0px 20px #54f7f8, 0px 0px 30px #54f7f8, 0px 0px 50px #54f7f8, 0px 0px 60px #54f7f8 ;
  z-index: 1;
  background-color: #54f7f8;
  animation: bigball 1s infinite linear;
}

.smallball1{
  animation-delay: -1.75s;
}
.smallball6{
  animation-delay: -1.5s;
}
.smallball2{
  animation-delay: -1.25s;
}
.smallball7{
  animation-delay: -1s;
}
.smallball3{
  animation-delay: -0.75s;
}
.smallball8{
  animation-delay: -0.5s;
}
.smallball4{
  animation-delay: -0.25s;
}
.smallball5{
  animation-delay: -0s;
}

@keyframes bigcon {
  0% {
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  100% {
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(405deg);
  }
}

@keyframes small {
  0% {
    transform: scale(1);
    background-color: #46b9ff;
  }
  10% {
    transform: scale(1.3);
    background-color: #54f7f8;
  }
  15% {
    transform: scale(1);
  }
  25%{
    transform: scale(1);
    background-color: #46b9ff;
  }
  100%{
    transform: scale(1);
    background-color: #46b9ff;
  }
}

#loading
{
  font-family: Arial;
  font-size: 10pt;
  border: 0px ;
  display: none;
  background-color: White;
  z-index: 999;   
}

What am I doing wrong? Any help will be greatly appreciated

Answer 1

Try this:

CSS

.main:before{
    position: absolute;
    content:"";
    width: 100%;
    background: #EBEBEB;
    height: 100%;
    left:0;
    z-index:-1;
}

DEMO HERE