javascript - Grey out background while page loading

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 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

This is what I've done:

In my asp 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

Share Improve this question edited Nov 10, 2015 at 10:46 Patel 1,4781 gold badge13 silver badges24 bronze badges asked Nov 10, 2015 at 9:48 Kerieks 1,0747 gold badges27 silver badges54 bronze badges

Where is your #overlay element? – Patel Commented Nov 10, 2015 at 9:55
body { background-color:#EBEBEB !important; } – laszlokiss88 Commented Nov 10, 2015 at 9:55
@Patel.... I added the overlay (which should be the class of main). On jsfiddle it is working, but they greyout does not work in my project jsfiddle/Kerieks/ofsfmqhe/2 – Kerieks Commented Nov 10, 2015 at 10:09

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

Try this:

CSS

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

DEMO HERE

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Grey out background while page loading - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)