.loading {
  @height: 6px;

  @keyframes updown {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-@height);
    }
    100% {
      transform: translateY(0px);
    }
  }

  @keyframes downup {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(@height);
    }
    100% {
      transform: translateY(0px);
    }
  }

  &:global {
    &.loading-fade-enter-active {
      transition: opacity 0.2s ease-out;
    }
    &.loading-fade-leave-active {
      transition: opacity 0.2s ease-in;
    }
    &.loading-fade-enter-from,
    &.loading-fade-leave-to {
      opacity: 0;
    }
  }

  .loading-dot-wrapper {
    &.run {
      .loading-dot-wrapper__dot {
        // https://www.w3school.com.cn/cssref/pr_animation.asp
        // animation-name
        // animation-duration
        // animation-timing-function
        // animation-delay
        // animation-iteration-count
        // animation-direction

        @duration: 0.6s;
        @delay: 0.2s;
        // @duration: 0.5s;
        // @delay: 0.16s;
        // @duration: 0.4s;
        // @delay: 0.13s;

        // 奇数
        .animation(@i) when not(mod(@i,2)=0) {
          animation: updown @duration linear @delay * @i;
        }
        // 偶数
        .animation(@i) when (mod(@i,2)=0) {
          animation: downup @duration linear @delay * @i;
        }

        .gen(@n, @i: 1) when (@i =< @n) {
          &:nth-child(@{i}) {
            .animation(@i);
          }
          .gen(@n, (@i + 1));
        }

        // “loading...”字样长度为10
        .gen(10);
      }
    }
  }
}
