Как правильно анимировать панель загрузки в React? ⇐ CSS

[Anonymous]

Я создаю панель загрузки в React, но что-то не так. Я хочу, чтобы ширина заполнялась на 100 % по достижении таймером 3 секунд, но по какой-то причине это не работает должным образом.

Код: Выделить всё

const { useState, useEffect } = React;

const Loading = () => {
const [isLoading, setIsLoading] = useState(true);
const [progress, setProgress] = useState(0);

useEffect(() => {
const duration = 3000;
const increment = 100 / duration;

const timer = setInterval(() => {
setProgress((prevProgress) => {
const newProgress = prevProgress + increment;
if (newProgress >= 100) {
clearInterval(timer);
setIsLoading(false);
return 100;
}
return newProgress;
});
}, 10);

return () => clearInterval(timer);
}, []);

return (

{isLoading && (

)}

);
};

// Render it
ReactDOM.createRoot(
document.getElementById("root")
).render(

);

Код: Выделить всё

.loadng_bar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 5px;
background-color: #c4483f;
transition: width 3.05s linear;
}

Код: Выделить всё

Это должно увеличить прогресс до полной ширины в течение 3 секунды. Как мне этого добиться?

Подробнее здесь: https://stackoverflow.com/questions/790 ... r-in-react