#fakeloader-overlay {
  opacity: 0;
  top: 0px;
  left: 0px;
  position: fixed;
    text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  z-index: 9998999;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear; 
}

#fakeloader-overlay.visible {
  opacity: 1; 
}

#fakeloader-overlay.hidden {
  opacity: 0;
  height: 0px;
  width: 0px;
  z-index: -10000; 
}


  #fakeloader-overlay .loader {
    position: absolute;
      text-align: center;
      z-index: 12;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  #fakeloader-overlay .loader, #fakeloader-overlay .loader::before {
  
    animation-delay: 0.18s; }
  #fakeloader-overlay .loader, #fakeloader-overlay .loader::after {

    animation-delay: 0.54s; }

@keyframes fakeloader {
  0% {
    box-shadow: 0 28px 0 -28px #0052ec; }
  100% {
    box-shadow: 0 28px 0 #0052ec; } }


.spinner ul{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
  
}
.spinner ul li{
  list-style:none;
  width:40px;
  height:40px;
  background:#fff;
  border-radius:50%;
  animation:grow 1.6s ease-in-out infinite;
}
  @keyframes grow
  {
    0% , 40% , 100%
    {
      transform:scale(0.2);
    }
    20%{
       transform:scale(1);

    }
  }

.spinner ul li:nth-child(1){
  animation-delay:-1.4s;
  background:#ffff00;
  box-shadow:0 0 50px #ffff00;
  
}
.spinner ul li:nth-child(2){
  animation-delay:-1.2s;
  background:#76ff03;
  box-shadow:0 0 50px #76ff03;
  
}
.spinner ul li:nth-child(3){
  animation-delay:-1s;
  background:#f06292;
  box-shadow:0 0 50px #f06292;
  
}
.spinner ul li:nth-child(4){
  animation-delay:-0.8s;
  background:#4fc3f7;
  box-shadow:0 0 50px #4fc3f7;
  
}
.spinner ul li:nth-child(5){
  animation-delay:-0.6s;
  background:#ba68c8;
  box-shadow:0 0 50px #ba68c8;
  
}
.spinner ul li:nth-child(6){
  animation-delay:-0.4s;
  background:#f57c00;
  box-shadow:0 0 50px #f57c00;
  
}
.spinner ul li:nth-child(7){
  animation-delay:-0.2s;
  background:#673ab7;
  box-shadow:0 0 50px #673ab7;
  
}

.spinner {
  margin:0px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #0747a6;
  
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}