src/animations/ball-spin-loader.scss

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

@import '../variables';
@import '../mixins';

$radius: 45px;

@keyframes ball-spin-loader {
  75% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

@mixin ball-spin-loader($n:8, $start:1) {
  @for $i from $start through $n {
    > span:nth-child(#{$i}) {
      $iter: 360 / $n;
      $quarter: ($radius / 2) + ($radius / 5.5);

      @if $i == 1 {
        top: $radius;
        left: 0;
      } @else if $i == 2 {
        top: $quarter;
        left: $quarter;
      } @else if $i == 3 {
        top: 0;
        left: $radius;
      } @else if $i == 4 {
        top: -$quarter;
        left: $quarter;
      } @else if $i == 5 {
        top: -$radius;
        left: 0;
      } @else if $i == 6 {
        top: -$quarter;
        left: -$quarter;
      } @else if $i == 7 {
        top: 0;
        left: -$radius;
      } @else if $i == 8 {
        top: $quarter;
        left: -$quarter;
      }

      animation: ball-spin-loader 2s ($i * 0.9s) infinite linear;
    }
  }
}

.ball-spin-loader {
  @include ball-spin-loader();
  position: relative;

  > div {
    @include global-animation();

    position: absolute;
    width: 15px;