How to reset Material UI LinearProgress after completion?

user_969985 0
Viewed 1179

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}/>
    );
}
material-ui progress-bar
1 Answers

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: {}
user_132382530
Related