如何在 Material-UI 循环进度中添加额外的笔画

Question

我正在尝试使用 Material-UI 创建一个确定的循环进度，如下所示：circular progress image

下面的代码似乎没有将多余的圆圈显示为背景：

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

我检查了MUI Docs about Circular Progress，但找不到任何支持这种行为的道具。据我所知，MUI 使用单个 svg 组件进行循环进度，据我了解，它只能使用 2 个 svg 来实现，其中一个充当骨架，另一个充当加载进度。

我的问题是如何为圆形进度添加额外的笔触颜色/实现与above image link 中显示的相同的效果？任何帮助是极大的赞赏。谢谢！

Answer 1

你可以这样做。

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

玩转盒子阴影和厚度。

Answer 2

查看文档的Customization 部分。

简而言之，是的，您需要使用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>
  );
}