Can’t animate html progress using react-spring Code Answer

I am trying to animate a html bar element using react-spring like this:

import { useSpring, animated } from 'react-spring'

const Example = ()=> {
    const props = useSpring({ value: 320, from: { value: 0 } });

    return (
       <progress style={{width:"70%"}} id="file" value={props.value}  max="1000"/>

And it simply just doesn’t work

is this a limitation of the html progress bar or have i got something wrong?

Ive made a little edit of a CodeSanbox to show it (not) working:



Try to use the animated version of progress. And use the value from the props.

  <animated.progress id="file" value={props.value} max="1000" />

Related Posts

© No Copyrights, All Questions are retrived from public domain.
Tutorial Guruji