.xm-infinite-scroll-loading {
  @include xm-flex-center();
  padding: rem(8px) 0;
  > span {
    display: inline-block;
    width: rem(12px);
    height: rem(12px);
    border-radius: 100%;
    background-color: $c-theme-lightest;
    opacity: 0;
    margin: 0 rem(2px);

    &:nth-child(1) {
      animation: xm-kf-infiniteScroll-loading 1s ease-in-out infinite;
    }
    &:nth-child(2) {
      animation: xm-kf-infiniteScroll-loading 1s ease-in-out 0.33s infinite;
    }
    &:nth-child(3) {
      animation: xm-kf-infiniteScroll-loading 1s ease-in-out 0.66s infinite;
    }
  }
}

@keyframes xm-kf-infiniteScroll-loading {
  0%, 100% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }
}