CODEWITHSUNDEEP
javascriptcssresponsive-designmaterial-ui
Joe Robin
Joe Robin

Reputation: 153

How to change the path colour of circular progress in Material Ui?

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

Upvotes: 8

Views: 6422

Answers (5)

Yaser AZ
Yaser AZ

Reputation: 518

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>

Upvotes: 0

Amr Eraky
Amr Eraky

Reputation: 1761

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>

Upvotes: 8

Stanley
Stanley

Reputation: 2794

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

Upvotes: 4

Pavel Kruglik
Pavel Kruglik

Reputation: 51

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.

Upvotes: 5

alvAro365
alvAro365

Reputation: 399

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

Upvotes: 1

Related Questions