preloader div {
  transition: 0.25s linear all;
}

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

.loader {
  top: 	-webkit-calc(50% - 100px);
  top: 	   -moz-calc(50% - 100px);
  top:       -o-calc(50% - 100px);
  left: -webkit-calc(50% - 100px);
  left:    -moz-calc(50% - 100px);
  left:      -o-calc(50% - 100px);
  z-index:10000;
  position:absolute;
  width: 300px;
  height: 100px;
  background-image: url('../img/druva-logo.svg');
  background-size: 200px 66px;
  background-position: top center;
  background-repeat: no-repeat;
}
.loader::after {
	content: '';
	width: 40px;
	height: 40px;
	border-radius: 3px;
	position: absolute;
	-webkit-animation: tp-rotateplane 2s infinite;
	animation: tp-rotateplane 2s infinite;
	top: 100%;
	left: 45%;
}
 

@-webkit-keyframes tp-rotateplane {
  0% { -webkit-transform: perspective(120px); background-color: #ff9933; }
  25% { background-color: #2ead89; }
  50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #077e98; }
  75% { background-color: #0790ac; }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg); 
  background-color: #ff9933; }
}

@keyframes tp-rotateplane {
  0% { -webkit-transform: perspective(120px); background-color: #ff9933; }
  25% { background-color: #2ead89; }
  50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #077e98; }
  75% { background-color: #0790ac; }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg); 
  background-color: #ff9933; }
}