添加渐变以反应圆形进度条

时间:2020-04-27 05:51:05

标签: reactjs progress-bar

我一直在为我的简单仪表板创建一些圆形进度栏。基本上,我使用react-circular-progressbar,因为它对用户友好。它工作正常,但我想通过CSS或其他方式为其笔触添加一些渐变。这是一个代码片段,可以使您弄清楚:

<CircularProgressbarWithChildren value={78} styles={{ root: {}, path: { stroke: "#6D6CB8" } }} >
<span style={{ color: "#6D6CB8" }}>78<tspan>%</tspan></span>
</CircularProgressbarWithChildren>

1 个答案:

答案 0 :(得分:0)

您可以考虑使用react-gradient-progress来实现。 类似于带有渐变设置的react-circular-progressbar

https://medium.com/better-programming/build-beautiful-gradient-enabled-circular-progress-bars-in-react-d0a746deed0

https://www.npmjs.com/package/react-gradient-progress