JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background: red;
  animation-name: fake-loader !important;
  animation-duration: 20s;
  animation-fill-mode: forwards;
}

@keyframes fake-loader {
  0% {
    width: 1px;
  }
  1% {
    width: 2px;
  }
  2% {
    width: 3px;
  }
  3% {
    width: 4px;
  }
  4% {
    width: 5px;
  }
  5% {
    width: 6px;
  }
  6% {
    width: 7px;
  }
  8% {
    width: 8px;
  }
  10% {
    width: 9px;
  }
  12% {
    width: 10px;
  }
  13% {
    width: 11px;
  }
  14% {
    width: 12px;
  }
  15% {
    width: 13px;
  }
  16% {
    width: 14px;
  }
  17% {
    width: 15px;
  }
  18% {
    width: 16px;
  }
  19% {
    width: 17px;
  }
  20% {
    width: 18px;
  }
  50% {
    width: 19px;
  }
  51% {
    width: 20px;
  }
  52% {
    width: 21px;
  }
  53% {
    width: 22px;
  }
  54% {
    width: 23px;
  }
  55% {
    width: 24px;
  }
  56% {
    width: 25px;
  }
  57% {
    width: 26px;
  }
  70% {
    width: 27px;
  }
  90% {
    width: 28px;
  }
  100% {
    width: 29px;
  }
}