$pathNumber: 18;

// The color that will be at the beginning and the end of the loop.
$firstColor: #0057B8;

// The list of all the used colors. You can add or remove colors, the animation stays fluid. The $first-color must remain at the end of the list though.
$listColors: #F11E4A, #F8A527, #266D7F, #82A, $firstColor;

$delayCoeff: 0.1s; 

body {
  background-color: #0057B8;
  text-align: center;
  line-height: 100vh;
}

.svg {
  display: inline-block;
  height: 200px;
  width: 200px;
  line-height: 200px;
  text-align: center;
  background-color: #FFF;
  border-radius: 50%;
}

#svg {
  display: inline-block;
  vertical-align: middle;
  fill: $firstColor;
  
  @for $i from 1 through 18 {

      path:nth-child(#{$i}) {
        -webkit-animation: pweek $delayCoeff*$pathNumber linear infinite;
        animation: pweek $delayCoeff*$pathNumber linear infinite;
        -webkit-animation-delay: $i*$delayCoeff;
        animation-delay: $i*$delayCoeff;
        
        &:hover {
          -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
          
        }
      }
   }
}

@-webkit-keyframes pweek {
  0% {
    fill: $firstColor;
  }
  @for $i from 1 through length($listColors) {
    #{$i*(100/length($listColors))}% {
      fill: nth($listColors, $i);
    }
  }
}

@keyframes pweek {
  0% {
    fill: $firstColor;
  }
  @for $i from 1 through length($listColors) {
    #{$i*(100/length($listColors))}% {
      fill: nth($listColors, $i);
    }
  }
}