How to reset Material UI LinearProgress after completion? - material-ui

Question

I have a LinearProgress bar that goes from 0 to 100 over the course of a few seconds, then jumps back to 0 and repeats.
<LinearProgress variant="determinate" value={progress}/>
The first load looks great with the animation. After it hits 100, the jump back to 0 ends up only reaching about 30, due to the long transition toward 0. If I turn off animations altogether, the jump from 100 to 0 is clean, but the progress from 0 to 100 is choppy.
Is it possible to have the animation/transition on while increasing but not decreasing/reset without swapping components? I see it's answered here for React Bootstrap, not sure if I can apply a similar technique here.
This works okay-ish, but would really like to avoid swapping components if possible:
const NoTransitionLinearProgress = withStyles({
bar: {
transition: 'none'
}
})(LinearProgress);
const ProgressBar = () => {
const progress = useSelector(state => state.progress);
if (progress > 0) {
return (
<LinearProgress variant="determinate" value={progress}/>
);
}
return (
<NoTransitionLinearProgress variant="determinate" value={progress}/>
);
}

Answer 1

I was looking for a way to disable the animation of the reset from 100 to 0 on the LinearProgress as well and found a solution combining the two threads you linked:
By using transition: none (found here) when the aria-valuenow attribute has the value 0 (found here) the reset to 0 can be done without animation. This does not however work for decreasing values in general. It only works for the reset to 0.
Sandbox with visualized example
Progress Bar component
<LinearProgress
className={classes.progressBar}
variant="determinate"
value={progress}
classes={{ bar: classes.progressBarInner }}
/>
CSS
progressBar: {
// Disable the transition animation from 100 to 0 inside the progress bar
'&[aria-valuenow="0"]': {
"& > $progressBarInner": {
transition: "none"
}
}
},
progressBarInner: {}