如何在MUI LinearProgressBar上添加随进度移动的自定义UI图标？

可以通过相对定位+绝对定位的方式，让自定义图标跟随进度条的推进移动，核心是根据进度值计算图标的位置。以下是完整的实现示例：

import { useState, useEffect } from 'react';
import LinearProgress from '@mui/material/LinearProgress';
import Box from '@mui/material/Box';
import Icon from '@mui/icons-material/Star'; // 替换成你需要的自定义图标

const ProgressBarWithIcon = () => {
  const [progress, setProgress] = useState(0);

  // 模拟进度推进效果
  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
    }, 800);
    return () => clearInterval(timer);
  }, []);

  return (
    <Box sx={{ position: 'relative', width: '100%', marginTop: 2 }}>
      <LinearProgress variant="determinate" value={progress} />
      {/* 自定义跟随图标 */}
      <Icon
        sx={{
          position: 'absolute',
          top: '50%',
          left: `${progress}%`,
          transform: 'translate(-50%, -50%)',
          bgcolor: 'white',
          borderRadius: '50%',
          padding: 0.5,
          boxShadow: 1,
          color: '#1976d2',
        }}
      />
    </Box>
  );
};

export default ProgressBarWithIcon;

关键实现细节： #

• 用Box作为容器并设置position: relative，为图标提供定位基准
• 图标设置position: absolute，通过left: ${progress}%绑定进度值，让它跟随进度移动
• 添加transform: translate(-50%, -50%)确保图标中心对齐进度条末端，避免偏移
• 可通过sx属性自定义图标的背景色、阴影、大小等样式，适配你的UI需求

如果需要使用自定义SVG图标而非MUI内置图标，直接替换Icon组件为你的自定义SVG即可，定位逻辑完全通用。

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