0
132
Views¿Cómo animo la barra de progreso de arranque de reacción de 0 a N en la carga de la página?
Estoy usando la biblioteca ui de react-bootstrap para la barra de progreso. Quiero que anime la barra de progreso de 0 a 70 en la carga de la página.
¿Cómo lo logro?
Aquí está el código
Componente.js
<ProgressBar animated now={70} className="progress-bar" />estilo.de.componente
.progress-bar { width: 400px; } Salida esperada: debería animarse de 0 a 70 al cargar la página. 
1 answers
Answer question0
La propiedad animate no anima el progreso, pero anima las franjas en la barra de progreso.
De los documentos :
Animate's the stripes from right to left
Lo que necesita es un temporizador que actualice la propiedad now . Probablemente algo como esto:
const MyComp = () => { const [progressNow, setProgressNow] = useState(0) const updateProgressNowHandler = setInterval(() => { if (progressNow >= 70 ){ setProgressNow(70) clearInterval(updateProgressNowHandler) } setProgressNow(s => s+1) }, 50) return <ProgressBar animated now={progressNow} className="progress-bar" /> }Esto de ninguna manera está listo para la producción.
Debe asegurarse de borrar el intervalo cuando se desmonte el componente.
Si existe la posibilidad de que el componente se vuelva a renderizar (lo que probablemente sucederá), debe realizar un seguimiento del progreso ya realizado y comenzar con el contador desde el último valor.