Optimisation : Progress Radial : Animation

[hakaba]

Create an animation in CSS instead of requestAnimationFrame.

We need to use vars to define the limits between colors.

<div class="progress-radial" style="--firstLimit:108deg; --secondLimit:216deg; animation: animateGradient 5s infinite;"> [...]</div>

And :

    @keyframes animateGradient {
            0% {
                background: radial-gradient(circle, white 58%, transparent 58.1%),
                            conic-gradient(rgb(12, 123, 145) 0deg, 
                                           rgb(12, 123, 145) 0deg, 
                                           rgb(61, 93, 126) 0deg, 
                                           rgb(61, 93, 126) 0deg, 
                                           gainsboro 0deg, 
                                           gainsboro 360deg);
            }
            100% {
    background: radial-gradient(circle, white 58%, transparent 58.1%),
                            conic-gradient(rgb(12, 123, 145) 0deg, 
                                           rgb(12, 123, 145) var(--firstLimit), 
                                           rgb(61, 93, 126)  var(--firstLimit), 
                                           rgb(61, 93, 126)  var(--secondLimit), 
                                           gainsboro var(--secondLimit), 
                                           gainsboro 360deg);
            }
        };