Радиальная загрузка анимации - Javascript

Question

Я пытаюсь анимировать радиальный дизайн, загрузочное кольцо, состоящее из отдельных сегментов, которые содержатся в отдельных наборах div с классом.glow

Я использовал следующий код, чтобы попытаться анимировать атрибут.glow в CSS, так что первоначально 5 из 22 радиалов светятся равномерно на 360 градусов, а оставшиеся остатки заполняются светом по часовой стрелке. Я пытался заставить анимацию повторяться или повторять каждые 4 секунды, и попытался setTimeout() функция и setInterval() функции, но после просмотра видео на YouTube говорят, что это не очень эффективно или не рекомендуется для анимации, и лучше вместо этого использовать requestAnimationFrame. парень также сказал, что этот метод легко достигает 60 кадров в секунду, а два других - нет. Кто-нибудь знает как это сделать или знает правильный syntax/order или семантика этой проблемы.

    function animate() { 

    const radials = [...document.querySelectorAll('.radial')];
    let degrees = 29;

    for(i=0; i < radials.length; i++) {
                    degrees += 14;
                radials[i].style.transform = `rotate(${degrees}deg)`;
                    degrees += 33.9;
                }

        radials.forEach((radial, index) => {

                setTimeout(function() {

        radial.classList.add('glow'); },index * 98);
            requestAnimationFrame(animate);                 
            } 
                };  
        animate();

Вся помощь будет принята с благодарностью.