.spinner_bg {
    width:100%; height:100%; opacity:0.5; background-color:#000; position:fixed; top:0px; left:0px; z-index:9999999;
    display:none;
}
.spinner_fw {
    position:absolute;
    top:40%;
    width:100%;
}
.spinner {
   margin: 0px auto;
   width: 50px;
   height: 50px;
   position: relative;
}
.spinner_bgv1 {
    width: 96px;
    height: 96px;
    opacity: 0.5;
    background-color:#000;
    position:fixed;
    top: 50%;
    left: 50%;
    z-index:9999999;
    margin-top: -48px;
    margin-left: -48px;
    display: block;
    border-radius: 10px;
}
.spinner_fwv1 {
    position:absolute;
    top: 30%;
    width:100%;
}
 

.container1 > div, .container2 > div, .container3 > div {

  width: 15px;

  height: 15px;

  background-color: #808080;

 

  border-radius: 100%;

  position: absolute;

  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;

  animation: bouncedelay 1.2s infinite ease-in-out;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

 

.spinner .spinner-container {

  position: absolute;

  width: 100%;

  height: 100%;

}

 

.container2 {

  -webkit-transform: rotateZ(45deg);

  transform: rotateZ(45deg);

}

 

.container3 {

  -webkit-transform: rotateZ(90deg);

  transform: rotateZ(90deg);

}

 

.circle1 { top: 0; left: 0; }

.circle2 { top: 0; right: 0; }

.circle3 { right: 0; bottom: 0; }

.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {

  0%, 80%, 100% { -webkit-transform: scale(0.0) }

  40% { -webkit-transform: scale(1.0) }

}

 

@keyframes bouncedelay {

  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }

}