时间戳

首页 > 解决方案 > 如何在 Material-UI 循环进度中添加额外的笔画

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

问题描述

我正在尝试使用这样的 Material-UI 创建一个确定的循环进度：循环进度图像

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

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

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

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

标签： javascriptcssreactjsmaterial-ui

解决方案

查看文档的自定义部分。

简而言之，是的，您需要一个带有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>
  );
}

推荐阅读