JSFiddle - React, Tailwind, and code Playground

by vitorbarbosa

HTML

<div class="outer">
    <div class="spinner">
      <div class="blue-pill"></div>
      <div class="orange-pill"></div>
    </div>
</div>

CSS

.outer {
    background: rgba(0,0,0,0.1);
    width: 100%;
    height: 200px;
}

.spinner {
  text-align: center;
  height: 100%;
  width: 100%;

  position: relative;
  margin: 0 auto;
}

.blue-pill, .orange-pill {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #093C71;
  opacity: .9;
  margin: 0 auto;
  text-align: center;
    
  position: absolute;
  top: 40%;
  left: 45%;
  z-index: 9;
}

.blue-pill {
    animation: linear infinite alternate, linear infinite alternate;
    animation-name: moveBlue, zIndexBlue;
    animation-duration: 0.8s, 0.8s;
    animation-delay: 0, 0.5s;
    
    -webkit-animation: linear infinite alternate, linear infinite alternate;
    -webkit-animation-name: moveBlue, zIndexBlue;
    -webkit-animation-duration: 0.8s, 0.8s;
    -webkit-animation-delay: 0, 0.5s;
}

.orange-pill {
    background-color: #e75204;
    z-index: 0;
    
    animation: linear infinite alternate, linear infinite alternate;
    animation-name: moveOrange, zIndexOrange;
    animation-duration: 0.8s, 0.8s;
    animation-delay: 0, 0.5s;
    
    -webkit-animation: linear infinite alternate, linear infinite alternate;
    -webkit-animation-name: moveOrange, zIndexOrange;
    -webkit-animation-duration: 0.8s, 0.8s;
    -webkit-animation-delay: 0, 0.5s;
}

@-webkit-keyframes moveBlue {
    from { transform: translateX(-20px); }
	to { transform: translateX(20px); }
}

@keyframes moveBlue {
    from { transform: translateX(-20px); }
	to { transform: translateX(20px); }
}

@-webkit-keyframes moveOrange {
    from { transform: translateX(20px); }
	to { transform: translateX(-20px); }
}

@keyframes moveOrange {
	from { transform: translateX(20px); }
	to { transform: translateX(-20px); }
}

@-webkit-keyframes zIndexBlue {
    from { z-index: 9; }
	to { z-index: 0; }
}

@keyframes zIndexBlue {
	from { z-index: 9; }
	to { z-index: 0; }
}

@-webkit-keyframes zIndexOrange {
    from { z-index: 0; }
	to { z-index: 9; }
}

@keyframes zIndexOrange {
	from...