.preloader {
    position: fixed;
    bottom: 16px;
    width: 50px;
    right: calc(50% - 25px);
    height: 30px;
    z-index: 1002;
    opacity: 0.5;
    transition: all ease 2s;
}
.preloader.initialized{
    right: 10px;
}
.preloader h4{
    margin: 5px 0 0 6px;
    color: white;
    text-transform: uppercase;
    font-size: 11px;
    text-align: center;
}
.preloader.initialized h4{color: black;}
.preloader span {
  position: absolute;
  display: inline-block;
  bottom: 0px;
  left: 0px;
  width: 9px;
  height: 5px;
  background: #9b59b6;
  -webkit-animation: preloader 1.5s infinite ease-in-out;
          animation: preloader 1.5s infinite ease-in-out;
}

.preloader span:nth-child(2) {
  left: 11px;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.preloader span:nth-child(3) {
  left: 22px;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.preloader span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.preloader span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

@-webkit-keyframes preloader {
  0% {height: 5px; -webkit-transform: translateY(0px); transform: translateY(0px); background: #9b59b6;}
  25% {height: 20px; -webkit-transform: translateY(10px); transform: translateY(10px); background: #3498db;}
  50% {height: 5px; -webkit-transform: translateY(0px); transform: translateY(0px); background: #9b59b6;}
  100% {height: 5px; -webkit-transform: translateY(0px); transform: translateY(0px); background: #9b59b6;}  
}

@keyframes preloader {
  0% {height: 5px; -webkit-transform: translateY(0px); transform: translateY(0px); background: #9b59b6;}
  25% {height: 20px; -webkit-transform: translateY(10px); transform: translateY(10px); background: #3498db;}
  50% {height: 5px; -webkit-transform: translateY(0px); transform: translateY(0px); background: #9b59b6;}
  100% {height: 5px; -webkit-transform: translateY(0px); transform: translateY(0px); background: #9b59b6;}  
}