.absolute-center() {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

preload {
  z-index: 9999;
  background: rgba(33, 37, 41, 0.9);
  .absolute-center();
  transition: opacity 0.3s ease-in-out;

  &.hide {
    opacity: 0;
    pointer-events: none;
  }
}

// Spinner
.spinner {
  font-size: @spinner-size;
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;

  &.center {
    .absolute-center();
  }
}

.spinner-blade {
  position: absolute;
  left: 0.4629em;
  bottom: 0;
  width: 0.074em;
  height: 0.2777em;
  border-radius: 0.5em;
  background-color: #ffffff48;
  transform-origin: center -0.2222em;
  animation: spinner-fade 1s infinite linear;

  // Blade animation loop
  .loop-blades(@i: 1) when (@i <= 12) {
    &:nth-child(@{i}) {
      animation-delay: (@i - 1) * 0.083s;
      transform: rotate((@i - 1) * 30deg);
    }
    .loop-blades(@i + 1);
  }
  .loop-blades();
}

@keyframes spinner-fade {
  0% {
    background-color: #ffffffff;
  }
  100% {
    background-color: #ffffff48;
  }
}