spur-tailwind/css/components/loading-overlay.css

Spur web UI

.loading-overlay {
  @apply absolute mx-auto z-40 bg-white;

  &.is-page {
    @apply inset-0 bg-white;

    & .loading-overlay-text {
      /*
        Position loading indicator vertically:
          ((viewportHeight - (headerHeight + footerHeight)) /2)
      */
      top: calc((100vh - 231px) / 2);

      @screen md {
        /*
          Position loading indicator vertically:
            ((viewportHeight - (headerHeight + footerHeight)) /2)
        */
        top: calc((100vh - 254px) / 2);
      }
    }
  }

  &.is-takeover {
    @apply inset-0;

    & .loading-overlay-text {
      top: 50vh;
      transform: translate(-50%, -50%);
    }
  }

  &.is-overflown {
    top: -1rem;
    right: -1rem;
    bottom: -1rem;
    left: -1rem;
  }
}

.loading-overlay-text {
  @apply absolute text-spur-grey text-center;
  left: 50%;
  transform: translateX(-50%);

  &::after {
    @apply block mx-auto mt-4 w-8 h-8 border-border-line-purple border-4 rounded-full opacity-100 pointer-events-none;
    transform: rotate(0);
    content: '';
    animation: rotateOverlaySpinner 1.5s linear infinite;
    animation-delay: 0.2s;
    border-top-color: #763eff;
  }
}

@keyframes rotateOverlaySpinner {
  100% {
    transform: rotate(360deg);
  }
}