彩虹loading

            
            $colors: #8D518A, #29ACEB, #72BF44, #FDF001, #F7941E;
$go: draw 3s infinite;
$delay: 100ms;

@mixin dashing($r, $offset, $array) {
  r: $r;
  stroke-dashoffset: $offset;
  stroke-dasharray: $array;
}
html {
  height: 100%;

}
body {
  height: 100%;
  width: 100%;
  background: #1F1F34;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contain {
  position: relative;
  width: 140px;
  height: 70px;
}

svg {
  position: absolute;
}

svg circle {
  animation: draw 3s infinite;
}

svg:nth-of-type(1) circle {
  stroke: nth($colors, 1);
}

svg:nth-of-type(2) circle {
  @include dashing(54px, 171px, 171px);
  stroke: nth($colors, 2);
  animation-delay: $delay;
}

svg:nth-of-type(3) circle {
  @include dashing(48px, 152px, 152px);
  stroke: nth($colors, 3);
  animation-delay: $delay + 100;
}

svg:nth-of-type(4) circle {
  @include dashing(43px, 136px, 136px);
  stroke: nth($colors, 4);
  animation-delay: $delay + 200;
}

svg:nth-of-type(5) circle {
  @include dashing(37px, 117px, 117px);
  stroke: nth($colors, 5);
  animation-delay: $delay + 300;
}

@keyframes draw1 {
  50% {
    stroke-dashoffset: 80px, 50px, 30px, 20px;
    stroke-dasharray: 80px, 50px, 10px, 5px;
  }
}

@keyframes draw2 {
  50% {
    stroke-dashoffset: 60px, 30px, 20px, 10px;
    stroke-dasharray: 60px, 40px, 15px, 4px;
  }
}

@keyframes draw {
  50% {
    stroke-dashoffset: 90px, 30px, 50px, 20px;
    stroke-dasharray: 60px, 20px, 7px, 3px;
  }
}