.app-pre-loader {
  /*background-color : rgba(0, 0, 255, 0.20);*/
  position : fixed;
  top      : calc(50% - 50px);
  left     : calc(50% - 50px);
  width    : 100px;
  height   : 100px;
  z-index  : 10000;
}

.app-pre-loader-none {
  opacity   : 0;
  animation : FadeOut .5s ease-in-out;
}

@keyframes FadeOut {
  0% {
    opacity : 1;
  }
  99% {
    opacity : 0;
  }
  100% {
    opacity : 0;
  }
}

.app-pre-loader #preloader6 {
  position          : relative;
  width             : 42px;
  height            : 42px;
  -webkit-animation : preloader_6 5s infinite linear;
  -moz-animation    : preloader_6 5s infinite linear;
  -ms-animation     : preloader_6 5s infinite linear;
  animation         : preloader_6 5s infinite linear;
}

.app-pre-loader #preloader6 span {
  width             : 20px;
  height            : 20px;
  position          : absolute;
  background        : red;
  display           : block;
  -webkit-animation : preloader_6_span 1s infinite linear;
  -moz-animation    : preloader_6_span 1s infinite linear;
  -ms-animation     : preloader_6_span 1s infinite linear;
  animation         : preloader_6_span 1s infinite linear;
}

.app-pre-loader #preloader6 span:nth-child(1) {
  background : #2ecc71;

}

.app-pre-loader #preloader6 span:nth-child(2) {
  left                    : 22px;
  background              : #9b59b6;
  -webkit-animation-delay : .2s;
  -moz-animation-delay    : .2s;
  -ms-animation-delay     : .2s;
  animation-delay         : .2s;

}

.app-pre-loader #preloader6 span:nth-child(3) {
  top                     : 22px;
  background              : #3498db;
  -webkit-animation-delay : .4s;
  -moz-animation-delay    : .4s;
  -ms-animation-delay     : .4s;
  animation-delay         : .4s;
}

.app-pre-loader #preloader6 span:nth-child(4) {
  top                     : 22px;
  left                    : 22px;
  background              : #f1c40f;
  -webkit-animation-delay : .6s;
  -moz-animation-delay    : .6s;
  -ms-animation-delay     : .6s;
  animation-delay         : .6s;
}

@-webkit-keyframes preloader_6 {
  from {
    -webkit-transform : rotate(0deg);
  }
  to {
    -webkit-transform : rotate(360deg);
  }
}

@-webkit-keyframes preloader_6_span {
  0% {
    -webkit-transform : scale(1);
  }
  50% {
    -webkit-transform : scale(0.5);
  }
  100% {
    -webkit-transform : scale(1);
  }
}


@-moz-keyframes preloader_6 {
  from {
    -moz-transform : rotate(0deg);
  }
  to {
    -moz-transform : rotate(360deg);
  }
}

@-moz-keyframes preloader_6_span {
  0% {
    -moz-transform : scale(1);
  }
  50% {
    -moz-transform : scale(0.5);
  }
  100% {
    -moz-transform : scale(1);
  }
}

@-ms-keyframes preloader_6 {
  from {
    -ms-transform : rotate(0deg);
  }
  to {
    -ms-transform : rotate(360deg);
  }
}

@-ms-keyframes preloader_6_span {
  0% {
    -ms-transform : scale(1);
  }
  50% {
    -ms-transform : scale(0.5);
  }
  100% {
    -ms-transform : scale(1);
  }
}

@-ms-keyframes preloader_6 {
  from {
    -ms-transform : rotate(0deg);
  }
  to {
    -ms-transform : rotate(360deg);
  }
}

@keyframes preloader_6_span {
  0% {
    transform : scale(1);
  }
  50% {
    transform : scale(0.5);
  }
  100% {
    transform : scale(1);
  }
}