%loader-common {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: text-bottom;
}

// Spin

.loader-one,
.loader-spin {
  @extend %loader-common;
  border: .125em solid currentColor;
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  animation: .67s linear 0s infinite spin;
}

// Grow

@keyframes loader-grow {
  0% {
    transform: scale(0);
  }

  50% {
    opacity: 1;
  }
}

.loader-grow {
  @extend %loader-common;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: .75s linear infinite loader-grow;
}

// Dots

@keyframes loader-dot-shift {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(.3em, 0);
  }
}

.loader-dots {
  @extend %loader-common;

  div {
    position: absolute;
    top: .4125em;
    width: .1625em;
    height: .1625em;
    background: currentColor;
    border-radius: 50%;
    animation-timing-function: ease-in-out;
  }

  div:nth-child(1) {
    left: .1em;
    animation: grow .6s infinite;
  }

  div:nth-child(2) {
    left: .1em;
    animation: loader-dot-shift .6s infinite;
  }

  div:nth-child(3) {
    left: .4em;
    animation: loader-dot-shift .6s infinite;
  }

  div:nth-child(4) {
    left: .7em;
    animation: shrink .6s infinite;
  }
}

// Roller

$roller-dots: (
  1: .7875em .7875em,
  2: .85em .7em,
  3: .8875em .6em,
  4: .9em .5em,
  5: .8875em .4em,
  6: .85em .3em,
  7: .7875em .2125em,
  8: .7em .15em,
);

.loader-roller {
  @extend %loader-common;

  div {
    animation: spin 1.2s ease-in-out infinite;
    transform-origin: .5em .5em;

    &::after {
      position: absolute;
      display: block;
      width: .0875em;
      height: .0875em;
      margin: -.05em 0 0 -.05em;
      background: currentColor;
      border-radius: 50%;
      content: ' ';
    }

    @each $num, $position in $roller-dots {
      &:nth-child(#{$num}) {
        animation-delay: - $num * .036s;

        // scss-lint:disable NestingDepth
        &::after {
          top: nth($position, 1);
          left: nth($position, 2);
        }
      }
    }
  }
}