_auk-loader.scss

/* ==========================================================================
  auk-loader
  ========================================================================== */

.auk-loader-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 0;
  .auk-loader {
    margin-bottom: 0.5rem;
  }
}

.auk-loader-wrapper--small {
  padding: 0;
}

.auk-loader {
  display: inline-block;
  position: relative;
  width: 3rem;
  height: 1.6rem;

  &:before {
    animation: loader-wave infinite 1s linear;
    position: absolute;
    display: block;
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    box-shadow: 1rem 0 #666, 2rem 0 #666, 3rem 0 #666;
    border-radius: 50%;
    margin-top: -0.2rem;
    margin-left: -2.2rem;
    top: 50%;
    left: 50%;
  }
}

@keyframes #{loader-wave} {
  0% {
    box-shadow: 1rem -0 #666, 2rem -0 #666, 3rem 0 #666;
  }

  10% {
    box-shadow: 1rem -0.3rem #666, 2rem -0 #666, 3rem -0 #666;
  }

  20% {
    box-shadow: 1rem -0.6rem #666, 2rem -0.3rem #666, 3rem -0 #666;
  }

  30% {
    box-shadow: 1rem -0.3rem #666, 2rem -0.6rem #666, 3rem -0.3rem #666;
  }

  40% {
    box-shadow: 1rem -0 #666, 2rem -0.3rem #666, 3rem -0.6rem #666;
  }

  50% {
    box-shadow: 1rem -0 #666, 2rem -0 #666, 3rem -0.3rem #666;
  }

  60% {
    box-shadow: 1rem -0 #666, 2rem -0 #666, 3rem -0 #666;
  }

  100% {
    box-shadow: 1rem -0 #666, 2rem -0 #666, 3rem -0 #666;
  }
}