Login/Register
How to change the path colour of circular progress in Material Ui?
Asked Answered
javascriptcssresponsive-designmaterial-ui
C

5

8

enter image description here

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

Concretion answered 1/7, 2021 at 7:11 Comment(2)
Clarify please, what kind of path? – Normative
The path of the circle. – Concretion
E
8
const 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>
Erminiaerminie answered 20/9, 2022 at 8:43 Comment(3)
Thank you. It worked for me with little bit of playing around. <CircularProgress variant="determinate" value={55} size={50} thickness={4} style={ { color: 'grey', borderRadius: '50%', boxShadow: 'inset 0 0 0 5.5px #d1d1d1' } } /> – Ative
what is 44 inside boxShadow? – Cully
This shouldn't be a debate, this is the best answer on here. 2 lines of code as opposed to everyone layering SVGs over each other. Thank you for this it works great! – Smalls
B
5

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.

Bulter answered 1/2, 2022 at 6:56 Comment(0)
K
4

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 {
        }
    }
}

Loading circle with background MUI

Koala answered 11/3, 2022 at 13:35 Comment(0)
E
1

Workaround would be to use two circular progress bars on top of each other. Inspired by following example on MUI official doc: CircularProgressWithLabel

Ephemeron answered 4/11, 2021 at 14:29 Comment(0)
C
0

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>
Contort answered 16/5, 2024 at 11:55 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.