@keyframes even {
  0% {
    translate: 0 0;
  }
  12.5% {
    translate: 0 2rem;
  }
  25% {
    translate: 0 0;
  }
  37.5% {
    translate: 0 -2rem;
  }
  50%, 100% {
    translate: 0 0;
  }
}
.loading {
  height: 128px;
  width: 128px;
  display: flex;
}
.loading > div {
  background-image: url("/favicon.png");
  width: 25%;
  background-size: 128px 128px;
  background-repeat: no-repeat;
  animation: even 1s ease-in-out infinite;
}
.loading > div:nth-child(1) {
  animation-delay: 250ms;
  background-position-x: calc(-128px / 4 * (1 - 1));
}
.loading > div:nth-child(2) {
  animation-delay: 500ms;
  background-position-x: calc(-128px / 4 * (2 - 1));
}
.loading > div:nth-child(3) {
  animation-delay: 750ms;
  background-position-x: calc(-128px / 4 * (3 - 1));
}
.loading > div:nth-child(4) {
  animation-delay: 1000ms;
  background-position-x: calc(-128px / 4 * (4 - 1));
}

.loading {
  margin: auto;
}