I know how to change the background and the the colour of the progress. I want to change the colour of the path of the progress before it fill in
export const CircleProgress = withStyles(() => ({
root: {
width: '262px !important',
height: '262px !important',
transform: 'rotate(220deg) !important',
color: 'blue',
},
}))(CircularProgress);
How do I change the trail color
I know how to change the background and the the colour of the progress. I want to change the colour of the path of the progress before it fill in
export const CircleProgress = withStyles(() => ({
root: {
width: '262px !important',
height: '262px !important',
transform: 'rotate(220deg) !important',
color: 'blue',
},
}))(CircularProgress);
How do I change the trail color
Share Improve this question edited Jul 2, 2021 at 5:45 Joe Robin asked Jul 1, 2021 at 7:11 Joe RobinJoe Robin 1531 gold badge2 silver badges6 bronze badges 2- Clarify please, what kind of path? – Kas Elvirov Commented Jul 1, 2021 at 10:02
- The path of the circle. – Joe Robin Commented Jul 2, 2021 at 2:44
5 Answers
Reset to default 8const size = 120,
thickness = 9,
value = 22,
secColor = '#d1d1d1';
const progressSx = {
borderRadius: '50%',
boxShadow: `inset 0 0 0 ${thickness/44*size}px ${secColor}`,
};
<CircularProgress variant='determinate' size={size} thickness={thickness} value={value} sx={progressSx} />
function App() {
const { CircularProgress } = MaterialUI;
const size = 120,
thickness = 9,
value = 22,
secColor = '#d1d1d1';
const progressSx = {
borderRadius: '50%',
boxShadow: `inset 0 0 0 ${thickness/44*size}px ${secColor}`,
};
return (
<div className="App">
<CircularProgress variant='determinate' size={size} thickness={thickness} value={value} sx={progressSx} />
</div>
);
}
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="./script.js"></script>
</body>
</html>you could add styles in such a way :
border-radius: 50%;
box-shadow: inset 0 0 1px 5px $color;
background-color: transparent;
Just play with a spread-radius.
MUI V5
react
<Box className="box-wrapper" sx={{ position: "relative", display: "inline-flex" }}>
<CircularProgress
variant="determinate"
thickness={3}
{...props}
className={"foreground"}
/>
<CircularProgress
variant="determinate"
value={100}
className={"background"}
thickness={3}
/>
<Box
sx={{
top: 0,
left: 0,
bottom: 0,
right: 0,
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}>
<Typography
variant="caption"
component="div"
color="text.secondary">{`${Math.round(props.value)}%`}</Typography>
</Box>
</Box>
scss
.background {
position: absolute;
z-index: 1;
right: 0;
svg {
color: var(--color_300);
circle {
stroke-dashoffset: 0px !important;
}
}
}
.foreground {
position: relative;
z-index: 2;
svg {
color: var(--color_050);
circle {
}
}
}
Workaround would be to use two circular progress bars on top of each other. Inspired by following example on MUI official doc: CircularProgressWithLabel
the best solution worked for me is just to insert two icons on top of each other, one with primary color icon and other one with the secondary background color. like so:
<Box position={'relative'}>
<CircularProgress
variant='determinate'
value={100}
sx={theme => ({ color: theme.palette.grey[300] })}
thickness={4}
/>
<CircularProgress
variant='determinate'
value={[relative value here]}
color='success'
sx={{ position: 'absolute', left: 0 }}
thickness={5}
/>
</Box>