JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spinner"></div>

CSS

.spinner {
    width: 20px;
    height: 20px;
    -webkit-animation: rotateplane 1.2s alternate infinite ease-in-out;
    animation: rotateplane 1.2s alternate infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
  24.9% {background-color: #00b16a;}
  25.0% {background-color: #f22613;}
  50% { -webkit-transform: perspective(120px); background-color: #f22613;}
  74.9% { background-color: #f22613; }
  75% { background-color: #aaabae; }
  100% { -webkit-transform: perspective(120px) ; background-color: #aaabae; }
}