JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="loading-holder">
<div class="loader-anim"></div>
Loading
</div>

CSS

.loading-holder{
    width: 100px;
    height: 100px;
    margin: auto;
    text-align: center;
    line-height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.loader-anim {
  width: 40px;
  height: 40px;
  margin: auto;
  -webkit-animation: ig-transform 1.2s infinite ease-in-out;
  animation: ig-transform 1.2s infinite ease-in-out;
  background: #00A0DF;
}

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

@keyframes ig-transform {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}