Search code examples
javascripthtmlreactjsreact-hooksreact-spring

Can't animate html progress using react-spring

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

Solution

  • 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>