JSFiddle - React, Tailwind, and code Playground

by srinivaspotluri

HTML

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

CSS

body {
  background-color: #2ecc71;
}
.spinner {
  width: 15px;
  height: 30px;
  background-color: #7de3f5;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
  -webkit-animation: rotateGlass 4s infinite ease-in-out;
}
.spinner:before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: 30;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 6px solid #2ecc71;
}
.spinner:after {
  content: "";
  width: 0;
  height: 0;
  right: 0;
  display: block;
  position: absolute;
  z-index: 30;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 6px solid #2ecc71;
}
.spinner .sand:before {
  content: "";
  width: 100px;
  background-color: #f0ca7d;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50%;
  /*-webkit-transform: scaleY(50%);*/
  z-index: 10;
  -webkit-animation: dropsand 4s infinite ease-in-out;
}
.spinner .sand:after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  border-left: 0px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid rgba(255, 255, 255, 0.4);
  z-index: 20;
}
/*.spinner {
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
}*/
@-webkit-keyframes dropsand {
  0% {
    bottom: 50%;
  }
  35% {
    bottom: 0%;
    top: 50%;
  }
  50% {
    bottom: 0%;
    top: 50%;
  }
  85% {
    top: 0;
    bottom: 50%;
  }
  /*
  33% { 
    bottom: 50%; 
    top: 0;
  }
  66% { 
    bottom: 0; 
    top: 50%;
  }
  100% { 
    bottom: 0; 
    top: 100%;
  }*/
}
@-webkit-keyframes rotateGlass {
  40% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  90% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}