Material UI Circular Progress Customization Example

Customize the material UI progress circle by increasing the diameter or size of the circle. Change the thickness of CircularProgress ring. Stop running and pause the circular progress at some values.

Customization Code:

        import { CircularProgress } from "@material-ui/core";

        <CircularProgress
          variant="determinate"
          value={66}
          size={200}
          thickness={0.5}
          style={{ padding: "5px" }}
        />

Result :

In the CircularProgress customization code variant="determinate" will pause the circular progress of material UI from keeping on running.

thickness={0.5} alters the thickness of the circular ring of the progress circle in mui

size={200} attribute specifies the diameter or the size of the ring of mui CircularProgress

value={66} specify the length of the progress ring, if you want only half circle give value 50, for quarter 25

Example 2 :

Add icon inside progress circle – material UI example (React JS)

const ProgressBox = () => {
  
function CircularProgressWithIcon(props: any) {
    return (
      <div>
        <Box position="relative" display="inline-flex">
          <CircularProgress variant="determinate" value={100} size={70}  />
          <Box
            top={0}
            left={0}
            bottom={0}
            right={0}
            position="absolute"
            display="flex"
            alignItems="center"
            justifyContent="center"
          >
            <Typography variant="caption" component="div" color="textSecondary">
              {props.content}
            </Typography>
          </Box>
        </Box>
      </div>
    );
  }

  return (
      <div> <CircularProgressWithContent content={<LiveTvIcon color="secondary" />} />  </div>
  );

}

Result :

So this how easily we can customize the progress circle ring of material UI and use it for various purposes in our apps like circular counter stats, progress indicator circle with half circle.