I'm striving to add a circular progress bar that surrounds a circular icon with a visible space between the two elements, just as depicted in the image below. Although I successfully positioned the circular progress bar around the icon, creating adequate space between them seems to be posing a challenge. Can anyone provide guidance on achieving this?
https://i.stack.imgur.com/UcAQi.png
Desired Outcome
https://i.stack.imgur.com/DPkgb.png
Current Output
Below is my code snippet:
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>
// Additional grid items for the circular icons
</Grid>
.
.
.
.
</Grid>
</Box>
)
}
export default MileStones