How to add extra stroke in Material-UI Circular Progress

Question

I'm trying to create a determinate circular progress using Material-UI like this: circular progress image

Below code doesn't seem to show the extra circle as the background:

<CircularProgress variant="determinate" value={value} />

I checked MUI Docs about Circular Progress but I can't find any prop that support this behavior. As far as I know, MUI is using a single svg component for the Circular Progress & from my understanding it can only be achieved using 2 svg with one acting as the skeleton while the other one will be the loading progress.

My question is how do I add extra stroke color to the circular progress / achieve the same thing as shown in the above image link? Any help is greatly appreciated. Thanks!

Answer 1

Check out Customization section of the docs.

In short, yes, you need a second circle with value=100.

Here's JS code sample that should do what you want:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import CircularProgress from "@material-ui/core/CircularProgress";

const useStyles = makeStyles((theme) => ({
  root: {
    position: "relative"
  },
  bottom: {
    color: "blue"
  },
  top: {
    color: "red",
    animationDuration: "550ms",
    position: "absolute",
    left: 0
  },
  circle: {
    strokeLinecap: "round"
  }
}));

export default function MyCircularProgress(props) {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <CircularProgress
        variant="determinate"
        className={classes.bottom}
        size={40}
        thickness={4}
        {...props}
        value={100}
      />
      <CircularProgress
        variant="determinate"
        disableShrink
        className={classes.top}
        classes={{
          circle: classes.circle
        }}
        size={40}
        thickness={4}
        value={33}
        {...props}
      />
    </div>
  );
}