preload.css

body {
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.87);
}

html {
  overscroll-behavior: none;
}

.middle {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

@media screen and (display-mode: browser) {
  .middle .spinner {
    animation: scale-in 300ms ease-in both;
  }
}

/* Spinner */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes scale-in {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

.spinner {
  width: 150px;
  height: 150px;
  background-image: url(~assets/logo-small-inner.png);
}

.spinner::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  animation: spin 4000ms linear 300ms infinite;
  background-image: url(~assets/logo-small-outer.png);
}