Loader

<div class="loading">
  Loading
</div>
//Автор: Nikolay Talanov. @suez

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  font-size: 2em;
  color: blue;
  -webkit-animation: loadingAnimate 3s infinite;
          animation: loadingAnimate 3s infinite;
}

@-webkit-keyframes loadingAnimate {
  25% {
    transform: translate3d(-50%, -50%, 0) rotateX(180deg);
    color: yellow;
  }
  50% {
    transform: translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg);
    color: red;
  }
  75% {
    transform: translate3d(-50%, -50%, 0) rotateY(180deg);
    color: green;
  }
}

@keyframes loadingAnimate {
  25% {
    transform: translate3d(-50%, -50%, 0) rotateX(180deg);
    color: yellow;
  }
  50% {
    transform: translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg);
    color: red;
  }
  75% {
    transform: translate3d(-50%, -50%, 0) rotateY(180deg);
    color: green;
  }
}