将进度条沿圆圈均匀对齐

Question

我需要在ReactJS中开发以下组件。中间的圆只是平均值（这是一个div元素），我有12个进度条与该圆以相等的角度对齐。我正在使用React Bootstrap ProgressBar。

<ProgressBar now={40} /> 

以这种方式对齐进度栏的最佳方法是什么？进度条的固定数目将只有12。

Answer 1

这是我的方法：

• 很多平移/旋转
• computed: { withBrTags: function() { const doc = this.item.licensedocument.legal.documentText return doc.replace(/(\\r)*\\n/g, '<br>') } } 用于从中心点推动transform-origin
• 设置中心圆的背景颜色，以使progressbar的结尾不会窥视

progressbar

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
}

.average {
  border-radius: 50%;
  width: 75px;
  height: 75px;
  border: 2px solid green;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) rotate(-15deg);
  top: 50%;
  left: 50%;
  position: absolute;
  background-color: #fff;
}

.average span:first-child {
  border-bottom: 1px solid;
  margin-bottom: 1px;
}

progress {
  transform: translateY(-50%);
  top: 50%;
  left: calc(50% + 29px);
  position: absolute;
  transform-origin: -29px center;
  padding: 10px;
  max-width: 90px;
}

progress:nth-child(1) {
  transform: translateY(-50%) rotate(360deg);
}

progress:nth-child(2) {
  transform: translateY(-50%) rotate(330deg);
}

progress:nth-child(3) {
  transform: translateY(-50%) rotate(300deg);
}

progress:nth-child(4) {
  transform: translateY(-50%) rotate(270deg);
}

progress:nth-child(5) {
  transform: translateY(-50%) rotate(240deg);
}

progress:nth-child(6) {
  transform: translateY(-50%) rotate(210deg);
}

progress:nth-child(7) {
  transform: translateY(-50%) rotate(180deg);
}

progress:nth-child(8) {
  transform: translateY(-50%) rotate(150deg);
}

progress:nth-child(9) {
  transform: translateY(-50%) rotate(120deg);
}

progress:nth-child(10) {
  transform: translateY(-50%) rotate(90deg);
}

progress:nth-child(11) {
  transform: translateY(-50%) rotate(60deg);
}

progress:nth-child(12) {
  transform: translateY(-50%) rotate(30deg);
}

jsFiddle