如何在Material-UI Circular Progress中添加额外描边

Question

我正在尝试使用 Material-UI 创建一个确定的圆形进度，如下所示：圆形进度图像

下面的代码似乎没有显示额外的圆圈作为背景：

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

我检查了有关循环进度的MUI 文档，但我找不到任何支持此行为的道具。据我所知，MUI 使用单个 svg 组件来实现循环进度，根据我的理解，它只能使用 2 个 svg 来实现，其中一个作为骨架，另一个作为加载进度。

我的问题是如何向圆形进度添加额外的描边颜色/实现与上面的图像链接中所示的相同效果？任何帮助是极大的赞赏。谢谢！

Answer 1

查看文档的自定义部分。

简而言之，是的，您需要第二个带有

value=100

的圆圈。

这是 JS 代码示例，应该可以实现您想要的功能：

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

你可以做这样的事情。

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

调整盒子阴影和厚度。