how to implement a progress bar in react?

I want to make this component, both the start and end point should move continuously, when the end point reaches the end, it should start from beginning. I am currently using antD progress bar. Was thinking to use requestAnimationtionFrame , but the value isn't getting updated

My Ques are these:

1. How to move the start point ?
2. How to make this continuous?

useEffect(() => {
    if (loading == true && loadingPercent != 100) {
        if (loadingPercent > 90) {
            setPercent(0);
        }
        const percentage = setTimeout(() => {
            setPercent(loadingPercent + 40);
        }, 1);
        return () => {
            clearTimeout(percentage);
        };
    }
}, [loadingPercent]);

<Progress showInfo={false} percent={loadingPercent} size="small" />

I was trying with this but didn't work

const changePercent = () => {
    console.log(loadingPercent);
    if (loading === false) {
        console.log(loadingPercent);
        return;
    } else {
        if (loadingPercent < 99.9) {
            const rotation = loadingPercent + 50;
            setPercent(rotation);
            console.log(loadingPercent);
        } else {
            setPercent(0);
        }
        if (loading == true) requestAnimationFrame(() => changePercent());
    }
};

Note: I wan't to start this loading whenever loading == true