.loader {
  height: 60px;
  aspect-ratio: 2;
  position: relative;
}
.loader:before {
  content: "";
  position: absolute;
  inset: 100% 75% -3px 0;
  background: #524656;
  animation: l4-0 1s linear infinite alternate;
}
.loader:after {
  content: "";
  position: absolute;
  inset: auto 42.5% 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #cf4647;
  animation:
    l4-1 1s cubic-bezier(0, 700, 1, 700) infinite alternate,
    l4-2 1s linear infinite alternate;
}
@keyframes l4-0 {
  0%,
  30% {
    translate: 0% -2px;
    rotate: 20deg;
  }
  70%,
  to {
    translate: 300% -2px;
    rotate: -20deg;
  }
}
@keyframes l4-1 {
  0%,
  2% {
    bottom: 0%;
  }
  98%,
  to {
    bottom: 0.1%;
  }
}
@keyframes l4-2 {
  0% {
    translate: -220%;
  }
  to {
    translate: 220%;
  }
}