【问题标题】:Add gradient to react circular progress bar添加渐变以反应圆形进度条
【发布时间】:2020-04-27 05:51:05
【问题描述】:

我一直致力于为我的简单仪表板创建一些圆形进度条。基本上,我使用 react-circular-progressbar,因为我发现它对用户很友好。它工作正常,但我想用 CSS 或其他东西为其笔画添加一些渐变。这是一个代码 sn-p 让事情变得清晰:

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

【问题讨论】:

  • 这能回答你的问题吗? *.com/questions/47426782/…
  • 感谢您的回复。不幸的是,我在这个项目中使用的组件是从 react 导入的,这也是我无法向 svg 元素添加渐变的原因。

标签: reactjs progress-bar


【解决方案1】:

您可以考虑使用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

【讨论】: