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

Using Yii to attach an onclick event to CLinkPager for every pager link

What is the best way to retrieve dates from a MySQL database using ExpressJS?

How can I send props using the goBack() method in React components?

The Owl carousel's autoplay feature seems to be set at a fixed speed of 5

What is the best way to navigate to a different route using the <Redirect> component in the componentDidMount

Implementing a Button Click Event Listener on a Separate Component in React

Attempting to initiate the React App on PORT 3000 is the initial step in the process

What is the best way to incorporate material icons onto a website?

What mistakes am I making in this PHP code as I try to work with the select option?

Enhancing Kendo Grid with Checkbox Columns

Tips for preserving the status of a sidebar

Using jQuery's $.Deferred in conjunction with the window object's top.postMessage()

Sorting the keys of objects within an array

Loop proceeding without waiting for promise resolution containing nested Firebase call

CSS Horizontal Menu positioned left losing its background color due to float property

Creating a line break in a Vue.js confirmation dialog is a helpful feature that can be achieved with a

Ways to update the background hue of a selected Navigation Tab?

Maximizing Bootstrap's Potential: Achieving Right Alignment for Divs

Executing search bar capability through the use of AJAX and HTTP requests in JavaScript

Retrieving component layout from file