在圆形图标上添加materialUI圆形进度条

Question

我想在圆形图标周围添加圆形进度条，圆形进度条和图标之间有一个空格，如下图所示。 我能够将圆形进度条定位在图标周围，但无法在它们之间留出空间。 我该怎么做。

我想要什么

我是怎么做到的

这是我的代码：

import * as React from 'react';
import { Grid, Paper, Box, CircularProgress, circularProgressClasses } from '@mui/material';

const MileStones = () => {
    return (
      <Box sx={{ flexGrow: 1, position: 'relative', display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', pl: 2 }}>
        <Grid container spacing={1.4} sx={{ py: 4 }}>
          <Grid item xs >
            <CircularProgress size={50} sx={{ color: '#C4C4C4', position: 'absolute' }} variant="determinate" value={100} />
            <Paper sx={{ background: '#162983', width: 50, height: 50, borderRadius: '50%'}}></Paper>
          </Grid>
          <Grid item xs>
          <CircularProgress size={50} sx={{ position: 'absolute' }} variant="determinate" value={25} />
          <Paper elevation={3} sx={{ background: '#162983', width: 50, height: 50, textAlign: "center", borderRadius: '50%'}}></Paper>
          </Grid>
          <Grid item xs>
          <CircularProgress size={50} sx={{ position: 'absolute' }} variant="determinate" value={25} />
          <Paper elevation={3} sx={{ background: '#162983', width: 50, height: 50, textAlign: "center", borderRadius: '50%'}}></Paper>
          </Grid>
          <Grid item xs>
          <CircularProgress size={50} sx={{ position: 'absolute' }} variant="determinate" value={25} />
          <Paper elevation={3} sx={{ background: '#162983', width: 50, height: 50, textAlign: "center", borderRadius: '50%'}}></Paper>
          </Grid>
          <Grid item xs>
          <CircularProgress size={50} sx={{ position: 'absolute' }} variant="determinate" value={25} />
          <Paper elevation={3} sx={{ background: '#162983', width: 50, height: 50, textAlign: "center", borderRadius: '50%'}}></Paper>
          </Grid>
        </Grid>
        .
        .
        .
        .


        </Grid>
      </Box>
    )
}

export default MileStones

Answer 1

您可以将这个空间视为一个白色背景的细圆圈。