我正在尝试使用 Material-UI 创建一个确定的圆形进度,如下所示:圆形进度图像
下面的代码似乎没有显示额外的圆圈作为背景:
<CircularProgress variant="determinate" value={value} />
我检查了有关循环进度的MUI 文档,但我找不到任何支持此行为的道具。据我所知,MUI 使用单个 svg 组件来实现循环进度,根据我的理解,它只能使用 2 个 svg 来实现,其中一个作为骨架,另一个作为加载进度。
我的问题是如何向圆形进度添加额外的描边颜色/实现与上面的图像链接中所示的相同效果?任何帮助是极大的赞赏。谢谢!
查看文档的自定义部分。
简而言之,是的,您需要第二个带有
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>
);
}
你可以做这样的事情。
<CircularProgress
variant="determinate"
value={40}
style={{
width: "100px",
height: "100px",
borderRadius: "100%",
boxShadow: "inset 0 0 0px 11px gray",
backgroundColor: "transparent",
}}
thickness={5}
/>
调整盒子阴影和厚度。