@import "../../style/themes/default";
@loadingPrefixCls: mff-loading;
/* loading */
.@{loadingPrefixCls} {
  div {
    display: inline-block;
    width: 4px;
    height: 35px;
    margin: 2px;
    border-radius: 2px;
    background-color: @primary-color;
    animation: line-up-down 1s infinite linear;
  }

  &-sm div{
    width: 2px;
    height: 15px;
    margin: 1px;
    border-radius: 1px;
  }

  > div:nth-child(1) {
    animation-delay: 0s !important;
  }
  > div:nth-child(2) {
    animation-delay: -.2s !important;
  }
  > div:nth-child(3) {
    animation-delay: -.4s !important;
  }
  > div:nth-child(4) {
    animation-delay: -.6s !important;
  }
  > div:nth-child(5) {
    animation-delay: -0.8s !important;
  }
  > div:nth-child(6) {
    animation-delay: -1.0s !important;
  }
  > div:nth-child(7) {
    animation-delay: -1.2s !important;
  }
  > div:nth-child(8) {
    animation-delay: -1.4s !important;
  }
  > div:nth-child(9) {
    animation-delay: -1.6s !important;
  }

  @keyframes line-up-down {
    0%, 100% {
      transform: translateY(0)
    }
    25% {
      transform: translateY(-50%)
    }
    75% {
      transform: translateY(50%)
    }
  }
}