JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<div class="loader">
  <div class="animate">
    <div class="img">
    </div>
  </div>
</div>

CSS

.animate {
width: 40px;
height: 40px;
overflow: hidden;
}

.img {
background: url('https://image.ibb.co/hsEqH7/demo_iloveimg_cropped_1.jpg') repeat-y;
animation: slide 5s linear infinite;
width: 100%;
height: 100%;
}

@-webkit-keyframes slide {
  0% { background-position: left 0; }
  25% {background-position: left -50px }
  33% {background-position: left -50px }
  50% {background-position: left -100px }
  66% {background-position: left -100px }
  75% {background-position: left -141px }
  100% { background-position: left -141px; }
}