How to change the animation speed of a Material-UI Linear Progress Bar indeterminate?

Question

I'm using a LinearProgressBar with the indeterminate variant in a React app to give a feedback that an action is ongoing.

I find that the animation is too fast, is there a way to reduce its speed?

Answer 1

There is no prop provided in the LinearProgress component to adjust the animation speed so you're going to have to play with class overrides to override the default styles. In this case I'd increase the animation-duration to slow it down:

import { withStyles } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";

const SlowLinearProgress = withStyles({
  bar: {
    // apply a new animation-duration to the `.bar` class
    animationDuration: "8s"
  }
})(LinearProgress);

export default SlowLinearProgress;

---

For v5 of Material-UI, you can use styled instead of withStyles:

import { styled } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";

const SlowLinearProgress = styled(LinearProgress)({
  "& .MuiLinearProgress-bar": {
    // apply a new animation-duration to the `.bar` class
    animationDuration: "8s"
  }
});

export default SlowLinearProgress;

Related answer: How can I smoothly animate a Material UI LinearProgress over a fixed time period?