javascript - Can't animate html progress using react-spring

Question

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 (
    <animated.div>
       <progress style={{width:"70%"}} id="file" value={props.value}  max="1000"/>
    <animated.div/>
   )
}

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: https://codesandbox.io/s/react-spring-usespring-hook-forked-d5sez?file=/src/index.js

Thanks

question from:https://stackoverflow.com/questions/65871807/cant-animate-html-progress-using-react-spring

Answer 1

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

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