@antmjs/vantui/lib/loading/index.less

一套适用于Taro3及React的vantui组件库

@import '../style/var.less';

.van-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  .theme(color, '@loading-spinner-color');

  &__spinner {
    position: relative;
    box-sizing: border-box;
    .theme(width, '@loading-spinner-size');
    // compatible for 0.x, users may set width or height in root element
    max-width: 100%;
    max-height: 100%;
    .theme(height, '@loading-spinner-size');
    .theme(animation, 'van-rotate @loading-spinner-animation-duration linear infinite');

    &--spinner {
      animation-timing-function: steps(12);
    }

    &--circular {
      border: 2px solid transparent;
      border-top-color: currentcolor;
      border-left-color: currentcolor;
      border-radius: 100%;
    }
  }

  &__text {
    .theme(margin-left, '@padding-xs');
    .theme(color, '@loading-text-color');
    .theme(font-size, '@loading-text-font-size');
    .theme(line-height, '@loading-text-line-height');

    &:empty {
      display: none;
    }
  }

  &--vertical {
    flex-direction: column;

    .van-loading__text {
      .theme(margin, '@padding-xs 0 0');
    }
  }

  &__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &::before {
      display: block;
      width: 4px;
      height: 25%;
      margin: 0 auto;
      background-color: currentcolor;
      border-radius: 40%;
      content: ' ';
    }
  }
}

// .generate(@n, @i: 1) when (@i =< @n) {
//   .van-loading__dot:nth-of-type(@{i}) {
//     transform: rotate(@i * 30deg);
//     opacity: 1 - (0.75 / 12) * (@i - 1);
//   }
//   .generate(@n, (@i + 1));
// }
// .generate(12);
.van-loading__dot:nth-of-type(1) {
  transform: rotate(30deg);
  opacity: 1;
}

.van-loading__dot:nth-of-type(2) {
  transform: rotate(60deg);
  opacity: 0.9375;
}

.van-loading__dot:nth-of-type(3) {
  transform: rotate(90deg);
  opacity: 0.875;
}

.van-loading__dot:nth-of-type(4) {
  transform: rotate(120deg);
  opacity: 0.8125;
}

.van-loading__dot:nth-of-type(5) {
  transform: rotate(150deg);
  opacity: 0.75;
}

.van-loading__dot:nth-of-type(6) {
  transform: rotate(180deg);
  opacity: 0.6875;
}

.van-loading__dot:nth-of-type(7) {
  transform: rotate(210deg);
  opacity: 0.625;
}

.van-loading__dot:nth-of-type(8) {
  transform: rotate(240deg);
  opacity: 0.5625;
}

.van-loading__dot:nth-of-type(9) {
  transform: rotate(270deg);
  opacity: 0.5;
}

.van-loading__dot:nth-of-type(10) {
  transform: rotate(300deg);
  opacity: 0.4375;
}

.van-loading__dot:nth-of-type(11) {
  transform: rotate(330deg);
  opacity: 0.375;
}

.van-loading__dot:nth-of-type(12) {
  transform: rotate(360deg);
  opacity: 0.3125;
}

@keyframes van-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}