Question: How to control the progress?

[kershnerd]

Thanks for creating this! I am staring this project!

So maybe I am using this incorrectly but I am unable to control the progress. My end goal is to start the progress going and have the animation last 1 second.

<NProgress animationDuration={ props.delay } incrementDuration={ 1 } isAnimating={ props.loading_indicator } minimum={ 0.1 }>
    { ({ animationDuration, isFinished, progress }) => (
        <Container animationDuration={ animationDuration } isFinished={ isFinished }>
            <Bar animationDuration={ animationDuration } progress={ progress } />
        </Container>
    ) }
</NProgress>

It seems to take longer than 1 second and I think that is because the initial 1 second completes and then the trailing animation finishes across the screen. Is there a way to complete the full animation in as close to 1 second as possible?

And when I start the second animation (signaled by setting the isAnimating to true), the first animation takes some time to animate backwards to the initial state before starting again.

Any suggestions would be greatly appreciated!

[tanem]

Hi @kershnerd.

It seems to take longer than 1 second and I think that is because the initial 1 second completes and then the trailing animation finishes across the screen.

Yep, correct. Once you tell the component it's done, then a trailing animation will run for animationDuration ms.

Is there a way to complete the full animation in as close to 1 second as possible?

Should be possible. You'll have to take into account animationDuration on the trailing animation. So for example, the default animationDuration is 200ms, so you'll want to tell NProgress it's done by setting isAnimating to false after ~800ms.

And when I start the second animation (signaled by setting the isAnimating to true), the first animation takes some time to animate backwards to the initial state before starting again.

Sounds like you need to spin up a new NProgress instance for the new animation. You should be able to do this by adding a key prop. I had to use this approach to get the router examples to work, take a look at this code comment for info.

[kershnerd]

Perfect... I didn't fully understand what animationDuration was. Not it makes sense! Thanks!