@keyframes hourglass-rotation {
    0% { transform: rotateZ(0); }
    50% { transform: rotateZ(180deg); }
    100% { transform: rotateZ(360deg); }
  }
  #spinner {
    position: absolute; 
    width: 100vw; height: 100vh;
    left: 0; top: 0;
    z-index: 10000;
    background-color: rgba(30,37,54,1);
    opacity: .8;
    pointer-events: visible;
  }
  #spinner > .hourglass {
    width: 24px; height: 24px;
    animation-name: hourglass-rotation;
    animation-duration: 5s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    position: absolute;
    overflow: hidden;
    left: calc(50vw - 12px); top: calc(50vh - 12px);
    color: white;
    pointer-events: none;
  }
  #spinner > .wait {
    position: absolute;
    left:  50vw; top: 50vh;
    transform: translate(-50%, 100%);
    text-transform: capitalize;
  }

  .light #spinner {
    background: rgba(93, 93, 93, 0.8);
  }
  .light #spinner > .hourglass {
    filter: invert(1);
  }
  .light #spinner > .wait {
    color: black;
  }