How to make gradient animation loop on icons?

Question

css

Essence of the question: I have 15 gray icons arranged in a row. You need to run a looped gradient over them, sort of like a glare so that it runs from left to right. How can this be implemented? I just haven't come across this issue before. SVG Icons

Answer 1

You can try to set a color for them in a loop with a delay and set a transition for each transition, you should get the effect that you need

setInterval(_=>{
   icons.forEach(function(element, i){
      setTimeout(function(){
         element.style.color = 'white'
         setTimeout(_=>{
              element.style.color = 'green'
          }, 400)
      }, 240 * ++i)
   });
}, icons.length*200 + 800)

Something like this or as the person answered in the comments :)

Answer 2

componentDidMount() {
    const icon = document.querySelectorAll('.icon-effect')
    let current = 0
    setInterval(() => {
      current = (current + 1) % icon.length
      icon[current].classList.toggle('active-icon')
    }, 3000)
   }

+ transition: 2.35s ease-in-out;
It turned out exactly what was needed. Thank you)