.loader {
  display: none;
  margin: 0 auto;
  width: 60px;
  height: 50px;
  text-align: center;
  font-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
.loader > div {
    height: 100%;
    width: 8px;
    display: inline-block;
    float: left;
    margin-left: 2px;
    -webkit-animation: delay 0.8s infinite ease-in-out;
    animation: delay 0.8s infinite ease-in-out;
}
.loader .bar1 {
  background-color: #FFCC00 ;
}
.loader .bar2 {
  background-color: #AA8800;
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.loader .bar3 {
  background-color: #806600;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.loader .bar4 {
  background-color: #AA8800;
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.loader .bar5 {
  background-color: #FFCC00;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}


@-webkit-keyframes delay {
  0%, 40%, 100% { 
    transform: scaleY(0.05);
    -webkit-transform: scaleY(0.05);
  }  
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

@keyframes delay {
  0%, 40%, 100% { 
    transform: scaleY(0.05);
    -webkit-transform: scaleY(0.05);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

#grayout {
   position: fixed;
   left: 0px;
   top: 0px;
   height: 100%;
   width: 100%;
   background-color: black;
   opacity: 0.2;
   z-index: 99;
}

.loading {
   font-size: 14px;
   color: black;
}