如何更改 Material-UI 线性进度条不确定的动画速度？

Question

我在 React 应用程序中使用具有不确定变体的 LinearProgressBar 来提供操作正在进行的反馈。

我发现动画太快了，有办法降低速度吗？

Answer 1

LinearProgress 组件中没有提供用于调整动画速度的道具，因此您必须使用类覆盖来覆盖默认样式。在这种情况下，我会增加

animation-duration

来减慢速度：

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;

---

对于 Material-UI v5，您可以使用

styled

代替

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;

相关答案：如何在固定时间段内平滑地对 Material UI LinearProgress 进行动画处理？

Answer 2

这是我如何使用圆形装载机和

sx

道具做到这一点。

function CircularLoader(props: { duration: number }) {
  const [value, setValue] = useState(0);
  useEffect(() => {
    setValue(100);
  }, []);

  return (
    <CircularProgress
      sx={{
        "& .MuiCircularProgress-circle": {
          transitionDuration: `${props.duration}s`,
          transitionTimingFunction: "linear",
        },
      }}
      variant="determinate"
      value={value}
    />
  );
}

// example 3s loader
<CircularLoader duration={3} />;