loading_indicator

by Trifan Alexandru

HTML

<div class="cube">

</div>

CSS

.cube {
  width: 40px;
  height: 40px;
  background-color: #0FA2FC;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 4s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(-180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(-180deg)  rotateX(-180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    opacity: 0.2;
  } 25% { 
    transform: perspective(120px) rotateX(180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(180.1deg) rotateY(0deg);
    opacity: 0.4;
  } 50% { 
    transform: perspective(120px) rotateX(180deg) rotateY(179.9deg);
    -webkit-transform: perspective(120px) rotateX(180deg) rotateY(179.9deg);
    opacity: 0.6;
  } 75% {
    transform: perspective(120px) rotateX(0deg) rotateY(179.9deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(179.9deg);
    opacity: 0.8;
  } 100% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    opacity: 0.2;
  }
}