How to make svg animation loop continous in javascript

Question

elem = document.querySelectorAll("path");
function task(i) { 
  setTimeout(function() { 
      elem[i].animate({fill: 'green'},  { 
  // timing options
  duration: 150,
  iterations: 1 
});
  }, 150*i); 
} 
for(var i=0;i<8;i++){
task(i);
}

<svg id="loader" width="254" height="254" viewBox="0 0 254 254" fill="none" xmlns="http://www.w3.org/2000/svg">
<path  d="M138.015 34.5808C117.296 32.0597 97.1508 36.6367 80.1964 46.5191L71.6421 32.9501C91.9092 21.0282 116.102 15.5873 140.949 18.8694L138.015 34.5808Z" fill="#EEEEEE"/>
<path d="M203.656 74.5674C191.286 56.3592 172.481 42.5299 149.774 36.777L152.706 21.0752C179.936 27.7257 202.455 44.2535 217.124 66.077L203.656 74.5674Z" fill="#EEEEEE"/>
<path d="M219.029 137.837C221.314 119.063 217.771 100.762 209.733 84.8775L223.247 76.3584C233.303 95.5622 237.715 117.885 234.731 140.769L219.029 137.837Z" fill="#EEEEEE"/>
<path d="M179.116 203.428C197.288 191.057 211.088 172.272 216.833 149.596L232.545 152.53C225.94 179.766 209.459 202.302 187.676 217.005L179.116 203.428Z" fill="#EEEEEE"/>
<path d="M115.774 218.851C134.578 221.139 152.91 217.58 168.812 209.515L177.407 223.148C158.161 233.274 135.767 237.725 112.808 234.731L115.774 218.851Z" fill="#EEEEEE"/>
<path d="M53.429 183.416C65.7319 199.368 83.2405 211.392 104.014 216.655L101.047 232.545C75.6752 226.392 54.3812 211.669 39.6992 192.072L53.429 183.416Z" fill="#EEEEEE"/>
<path d="M46.7421 173.491C36.8287 156.52 32.2341 136.346 34.759 115.595L18.8694 112.628C15.5774 137.55 21.0611 161.813 33.0578 182.118L46.7421 173.491Z" fill="#EEEEEE"/>
<path d="M21.0752 100.871L36.9552 103.836C42.2262 83.0316 54.2774 65.502 70.2645 53.1963L61.6752 39.5718C42.039 54.2239 27.2708 75.5031 21.0752 100.871Z" fill="#EEEEEE"/>

</svg>

I have 8 different paths. I want to create a loading animation, by changing the color of the paths after certain interval, to look like rotating loader as shown. But I am able to run it only once. If I am trying to write an infinite loop my page is never loading and crashes. Please help me with this.

Answer 1

It doesn't need to use animation API.

You can make spinner with only use CSS.

svg#loader > path {
    animation-name: go;
    animation-duration: 1200ms;
    animation-iteration-count: infinite;
}

svg#loader > path:nth-child(2) { animation-delay: 150ms }
svg#loader > path:nth-child(3) { animation-delay: 300ms }
svg#loader > path:nth-child(4) { animation-delay: 450ms }
svg#loader > path:nth-child(5) { animation-delay: 600ms }
svg#loader > path:nth-child(6) { animation-delay: 750ms }
svg#loader > path:nth-child(7) { animation-delay: 900ms }
svg#loader > path:nth-child(8) { animation-delay: 1050ms }

@keyframes go {
    0% {
        fill: #EEEEEE;
    }
    12.5% {
        fill: green;
    }
    25% {
        fill: #EEEEEE;
    }
}

<svg id="loader" width="254" height="254" viewBox="0 0 254 254" fill="none" xmlns="http://www.w3.org/2000/svg">
<path  d="M138.015 34.5808C117.296 32.0597 97.1508 36.6367 80.1964 46.5191L71.6421 32.9501C91.9092 21.0282 116.102 15.5873 140.949 18.8694L138.015 34.5808Z" fill="#EEEEEE"/>
<path d="M203.656 74.5674C191.286 56.3592 172.481 42.5299 149.774 36.777L152.706 21.0752C179.936 27.7257 202.455 44.2535 217.124 66.077L203.656 74.5674Z" fill="#EEEEEE"/>
<path d="M219.029 137.837C221.314 119.063 217.771 100.762 209.733 84.8775L223.247 76.3584C233.303 95.5622 237.715 117.885 234.731 140.769L219.029 137.837Z" fill="#EEEEEE"/>
<path d="M179.116 203.428C197.288 191.057 211.088 172.272 216.833 149.596L232.545 152.53C225.94 179.766 209.459 202.302 187.676 217.005L179.116 203.428Z" fill="#EEEEEE"/>
<path d="M115.774 218.851C134.578 221.139 152.91 217.58 168.812 209.515L177.407 223.148C158.161 233.274 135.767 237.725 112.808 234.731L115.774 218.851Z" fill="#EEEEEE"/>
<path d="M53.429 183.416C65.7319 199.368 83.2405 211.392 104.014 216.655L101.047 232.545C75.6752 226.392 54.3812 211.669 39.6992 192.072L53.429 183.416Z" fill="#EEEEEE"/>
<path d="M46.7421 173.491C36.8287 156.52 32.2341 136.346 34.759 115.595L18.8694 112.628C15.5774 137.55 21.0611 161.813 33.0578 182.118L46.7421 173.491Z" fill="#EEEEEE"/>
<path d="M21.0752 100.871L36.9552 103.836C42.2262 83.0316 54.2774 65.502 70.2645 53.1963L61.6752 39.5718C42.039 54.2239 27.2708 75.5031 21.0752 100.871Z" fill="#EEEEEE"/>

</svg>