.lds-ripple {
  position: absolute;
  display: none;
  width: 130px;
  height: 130px;

  &.default {
    top: -30px;
    left: -22px;
  }

  &.eliot {
    top: -23px;
    left: -21px;
  }

  &.enabled {
    display: block;
  }

  div {
    position: absolute;
    border: 6px solid $loader-color;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;

    &:nth-child(2) {
      animation-delay: -0.5s;
    }
  }

  @keyframes lds-ripple {
    0% {
      top: 64px;
      left: 64px;
      width: 0;
      height: 0;
      opacity: 1;
    }

    100% {
      top: -1px;
      left: -1px;
      width: 130px;
      height: 130px;
      opacity: 0;
    }
  }
}