Reactjs 将进度条沿圆圈等距对齐

我需要在ReactJS中开发以下组件。中间的圆只是平均值，它是一个div元素，我有12个进度条与那个圆成等角对齐。我使用的是React引导ProgressBar

以这种方式调整进度条的最佳方法是什么？进度条的数量只有12个，这是固定的

以下是我的方法：

大量的平移/旋转 用于从中心点推送进度条的变换原点 设置中心圆的背景色，以使进度条末端不会穿透 .集装箱{ 位置：绝对位置； 左：50%； 最高：50%； 变换：平移-50%，-50%旋转15度； } .平均{ 边界半径：50%； 宽度：75px； 高度：75px； 边框：2倍纯绿； 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 证明内容：中心； 变换：平移-50%，-50%旋转-15度； 最高：50%； 左：50%； 位置：绝对位置； 背景色：fff； } .平均跨度：第一个孩子{ 边框底部：1px实心； 边缘底部：1px； } 进展{ 转化：translateY-50%； 最高：50%； 左：calc50%+29px； 位置：绝对位置； 变换原点：-29px中心； 填充：10px； 最大宽度：90px； } 进展：nth-child1{ 变换：translateY-50%旋转360度； } 进展：nth-child2{ 变换：translateY-50%旋转330度； } 进展：nth-child3{ 变换：translateY-50%旋转300度； } 进展：nth-child4{ 变换：translateY-50%旋转270度； } 进展：nth-child5{ 变换：translateY-50%旋转240度； } 进展：nth-child6{ 变换：translateY-50%旋转210度； } 进展：nth-child7{ 变换：translateY-50%旋转180度； } 进展：nth-child8{ 变换：translateY-50%旋转150度； } 进展：nth-child9{ 变换：translateY-50%旋转120度； } 进展：nth-10{ 变换：translateY-50%旋转90度； } 进展：N-11{ 变换：translateY-50%旋转60度； } 进展：N-12{ 变换：translateY-50%旋转30度； } 40% 75% 17% 27% 44% 31% 40% 75% 17% 27% 44% 31% 4.9 10

---

我看到12个进度条，你旋转和翻译稍微感谢。是的，我采用了一种类似的方法，在每个进度条上应用转换。

<ProgressBar now={40} />