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

You can do somethiibng like this.

<CircularProgress
      variant="determinate"
      value={40}
      style={{
        width: "100px",
        height: "100px",
        borderRadius: "100%",
        boxShadow: "inset 0 0 0px 11px gray",
        backgroundColor: "transparent",
      }}
      thickness={5}
    />

play around with box shadow and thickness.

Answer 2

Check out Customized progress 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>
  );
}