angular-page-loader/dist/angular-page-loader.css

quick app integration for your favourite loaders

preloader div {
  transition: 0.25s linear all;
}

preloader div.ng-hide {
  opacity: 0;
}

.loader {
  top:50%;
  left:50%;
  z-index:10000;
  position:absolute;
  width: 40px;
  height: 40px;
  margin-top:-20px;
  margin-left:-20px;
  -webkit-animation: tp-rotateplane 2s infinite ease-in-out;
  animation: tp-rotateplane 2s infinite ease-in-out;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

@-webkit-keyframes tp-rotateplane {
  0% { -webkit-transform: perspective(120px); background-color: #4285F4; }
  25% { background-color: #DE3E35; }
  50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #F7C223; }
  75% { background-color: #1B9A59; }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg); background-color: #4285F4; }
}

@keyframes tp-rotateplane {
  0% { -webkit-transform: perspective(120px); background-color: #4285F4; }
  25% { background-color: #DE3E35; }
  50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #F7C223; }
  75% { background-color: #1B9A59; }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg); background-color: #4285F4; }
}