如何为MUI LinearProgress添加条纹动画效果？

要实现目标中的条纹进度条动画，你需要给进度条的**填充条（bar）**添加条纹背景，并配合背景位置动画，而非直接给整个LinearProgress组件加动画。以下是修正后的完整代码：

import React, { FunctionComponent } from 'react';
import { Box, LinearProgress, LinearProgressProps } from '@mui/material';
import { styled, keyframes } from '@mui/material/styles';

// 修正动画关键帧：添加px单位，确保背景位置移动生效
const stripes = keyframes`
  from {
    background-position: 0 0;
  }

  to {
    background-position: 30px 0;
  }
`;

const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
  height: 8,
  borderRadius: 5,
  // 针对进度条的填充部分（bar）设置样式
  '& .MuiLinearProgress-bar': {
    borderRadius: 5,
    // 创建45度交替条纹背景：透明与主题色半透明交替
    backgroundImage: `linear-gradient(
      45deg,
      rgba(${theme.palette.primary.main.replace('#', '')}, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(${theme.palette.primary.main.replace('#', '')}, 0.15) 50%,
      rgba(${theme.palette.primary.main.replace('#', '')}, 0.15) 75%,
      transparent 75%,
      transparent
    )`,
    // 设置背景大小，控制条纹宽度与间距
    backgroundSize: '30px 30px',
    // 应用条纹滚动动画
    animation: `${stripes} 0.8s linear infinite`,
  },
}));

const LinearProgressBar: FunctionComponent<LinearProgressProps> = (props) => {
  return (
    <Box sx={{ width: '100%' }}>
      <BorderLinearProgress {...props} />
    </Box>
  );
};

export default LinearProgressBar;

关键修改说明： #

1. 目标元素修正：将动画和条纹样式应用到MuiLinearProgress-bar（进度条的填充部分），原代码的动画作用于轨道而非填充条，因此看不到条纹效果。
2. 条纹背景生成：通过linear-gradient创建45度交替的透明条纹，搭配backgroundSize控制条纹的尺寸。
3. 动画单位补充：给background-position的数值添加px单位，否则浏览器无法识别，动画不会生效。
4. 动画速度调整：将动画时长从0.3s改为0.8s，让条纹滚动节奏更接近目标效果。

该方案同时适配determinate（确定进度）和indeterminate（不确定进度）模式，MUI内置的进度动画会与条纹动画叠加生效。

内容的提问来源于stack exchange，提问作者arunmmanoharan