Adding an additional stroke to a Material-UI Circular Progress component involves customizing the styling properties

Question

Adding an additional stroke to a Material-UI Circular Progress component involves customizing the styling properties

I am attempting to create a circular progress bar with a determinate value using Material-UI, similar to the example shown in this circular progress image.

However, the following code does not display the additional circle as the background:

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

I have consulted the MUI Docs about Circular Progress but I have not found any prop that supports this specific behavior. From my understanding, MUI utilizes a single SVG component for the Circular Progress and achieving the desired effect would require two SVG elements - one acting as the base structure while the other displays the loading progress.

Therefore, my question is how can I add an extra stroke color to the circular progress bar or achieve a similar result as demonstrated in the linked image above? Any assistance on this matter would be greatly appreciated. Thank you!

javascript css reactjs material-ui

Answer 1

Answer №1

For more details, you can visit the Customization section in the documentation.

To summarize, adding a second circle with value=100 is necessary.

Here's an example of JavaScript code that accomplishes this:

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>
  );
}

Answer 2

For more details, you can visit the Customization section in the documentation.

To summarize, adding a second circle with value=100 is necessary.

Here's an example of JavaScript code that accomplishes this:

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>
  );
}

Answer 3

Answer №2

Try out this code snippet for a unique design.

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

Experiment with different box shadow effects and thickness settings to customize the look.

Answer 4

Try out this code snippet for a unique design.

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

Experiment with different box shadow effects and thickness settings to customize the look.

Adding an additional stroke to a Material-UI Circular Progress component involves customizing the styling properties

Answer №1

Answer №2

Similar questions

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu

Exporting functions using reactjs and babel

Creating personalized functions in Object.prototype using TypeScript

Chrome on IOS: Experiencing screen freezing while scrolling

Using placeholders with inputs in an Angular2 table generated by ngFor

navigating directly to a particular slide within a Bootstrap carousel on a different page by clicking

obtainServerSideProps query parameter

Count of elements in one flexbox row

CSS code that fixes a textarea at the bottom of a div

How can one effectively manage irregularly nested object/arrays within a Meteor framework?

Angular 4: Implementing a Re-login Dialog/Modal Using Interceptors

Is it better to have a single object with all required modules in NodeJS, or follow the "standard" paths in the code?

Is there an issue with the precedence of jison rules?

What is the best way to create a sliding motion to the right for a menu item, accompanied by a line when it

PHP Timer for Keeping Track of Time

What is the correct way to configure environment variables in a Next.js application deployed on Vercel?

What could be the reason for an async function to send an empty object in the request body?

Encountering a console error in a TypeScript Express app when using MUI and Preact: "Unexpected prop `children` passed to `InnerThemeProvider`, was expecting a ReactNode."

The reason why JavaScript condenses two or more spaces into just one space

Obtain data in JSON format through an xmlhttp request