AlchemyCMS/alchemy_cms

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1;
  width: var(--spinner-size, 32px);
  height: var(--spinner-size, 32px);

  &.spinner--small {
    --spinner-size: 16px;
  }

  &.spinner--large {
    --spinner-size: 48px;
  }

  path {
    fill: var(--spinner-color, currentColor);
    opacity: 1;
    animation: spinner 1s infinite ease-in-out both;
  }

  .hex2 {
    animation-delay: 0.15s;
  }

  .hex3 {
    animation-delay: 0.3s;
  }
}

@keyframes spinner {
  0%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0.1;
  }
}